JS中for循环结合setTimeout的四种解决方案

概述

首先简要介绍setTimeout的执行机制。该函数会将回调函数放入等待队列，待当前主程序执行完毕后，按照时间顺序依次执行队列中的回调。其核心问题在于作用域的归属。

因此若是这样将不会得到想要的结果输出1.2.3.4.5，而会连续输出5个6。

for (var i=1; i<=5; i++) {
    setTimeout( function timer() {
        console.log( i );
     }, i*1000 );
}

原因在于setTimeout是异步执行的。在for循环的每次迭代中，虽然setTimeout被触发，但其内部的函数并未立即执行，而是被放入任务队列等待。只有当主线任务全部执行完毕后，才会去执行任务队列中的函数。此时，for循环早已结束，变量i的值已变为6，因此尽管定时器经历了5秒的等待，控制台最终输出的内容仍然是6。

（注意：for循环从开始到结束的过程，需要维持几微秒或几毫秒，当定时器跑完一秒之后for循环早已经做完了。）

我们来看另一种情况：

for (var i=1; i<=5; i++) {
    (function() {
        setTimeout( function timer() {
            console.log( i );
        }, i*1000 );
    })();
}

根据setTimeout的运行机制，首先会执行外部的所有主程序。虽然for循环内部形成了闭包结构，但由于fun函数没有接收到明确的实参，其表现与第一个例子并无实质区别，结果依然是连续输出5个6。

解决方案1：闭包

使用闭包是一种经典且有效的做法：

for (var i=1; i<=5; i++) {
    (function(j) {
        setTimeout( function timer() {
            console.log( j );
        }, j*1000 );
    })(i);
}

我们可以发现，输出结果与预期一致，依次输出1到5。这是因为实际参数与定时器内部的变量形成了强依赖关系。

通过闭包机制，将i变量驻留在内存中。当输出j时，引用的是外部函数的变量值i，而i的值是随循环变化的。在执行setTimeout时，内部的输出内容已经确定。

解决方案2：拆分结构

我们还可以将setTimeout的定义和调用分别放到不同部分：

function timer(i) {
    setTimeout( console.log( i ), i*1000 );
}
for (var i=1; i<=5;i++) {
    timer(i);
}

控制台上输出依然是依次输出1到5。

解决方案3：let

这里再来说一说使用es6的let来解决此问题：

for (let i=1; i<=5; i++) {
    setTimeout( function timer() {
        console.log( i );
     }, i*1000 );
}

这个例子与第一个相比，只是把var更改成了let，可是控制台的结果却是依次输出1到5。

因为for循环头部的let不仅将i绑定到for循环中，事实上它将其重新绑定到循环体的每一次迭代中，确保上一次迭代结束的值重新被赋值。setTimeout里面的function()属于一个新的域，通过var定义的变量是无法传入到这个函数执行域中的，通过使用let来声明块变量能作用于这个块，所以function就能使用i这个变量了；这个匿名函数的参数作用域和for参数的作用域不一样，是利用了这一点来完成的。这个匿名函数的作用域有点类似类的属性，是可以被内层方法使用的。

解决方案4：setTimeout第三个参数

for (let i=1; i<=5; i++) {
    setTimeout( function timer() {
        console.log( i );
     }, i*1000, i );
}

由于每次传入的参数是从for循环里面取到的值，所以会依次输出1到5。

以上就是JS关于for循环中使用setTimeout的四种解决方案的详细内容，更多关于JS使用setTimeout的资料请关注本站其它相关文章！