javascript setTimeout倒计数的问题

Question

$('#test').on('click',function()
{
    
    var $self=$(this);
    var secs=60;
    for(var i=secs;i>=0;i--)
    {
        window.setTimeout(function()
        {
            var text=i+'秒后再次发送';
            console.log(i);
            $self.val(text);
            if(i==0)
            {
                
                
                $self.val('发送验证码');
            }
        }, (secs-i) * 1000);
    }
});

就是发送验证码，然后60秒之后可以再次发送，想做一个倒计数的显示，但是console.log(i)的输出全是-1不知道是怎么回事？

Answer 1

$('#test').on('click',function()
{
    
    var $self=$(this);
    var secs=60;
    var func = function() {
        var text=secs+'秒后再次发送';
        $self.val(text);
        if(secs==0)
        {
            $self.val('发送验证码');
        } else {
            secs--;
            window.setTimeout(func, 1000);
        }
    };
    window.setTimeout(func, 1000);
});

Answer 2

setTimeout是异步执行的，会在空闲的时候执行setTimeout中的函数，而这里的“空闲”大致指的是当前栈中代码执行完毕，也就是这里的for语句执行结束，才会执行timeout中的函数。

所以这里的执行过程是：for语句注册了60个timeout函数，for语句结束后，开始一个一个执行timeout函数。但是这里timeout中的i已经是for执行后的值，也就是－1。（具体请了解什么是闭包）

var secs=60;
for(var i=secs;i>=0;i--) {
    window.setTimeout((function(t) {
        return function() {
            var text=t+'秒后再次发送';
            console.log(text);
        };
     })(i), (secs-i) * 1000);
}