如何避免for循环中setTimeout引起的执行问题？

本文共计542个文字，预计阅读时间需要3分钟。

`gistfile1.txt` 下方这段代码，是前端开发招聘笔试中经常出现的，目的是考察对闭包以及 `setTimeout` 运行机制的掌握。

javascriptfor (var i=0; i <10; i++) { setTimeout(function() { console.log(i); }, 0);}

这段代码的关键在于 `setTimeout` 函数的调用和 `for` 循环的执行。以下是详细解析：

1. `setTimeout` 函数将一个匿名函数放入了任务队列，并设置了0毫秒后执行。但由于JavaScript是单线程的，这里的0毫秒并不意味着立即执行，而是尽快执行。

2.由于 `i` 是 `var` 声明的，它是一个函数作用域的变量，而不是块级作用域的变量。这意味着每次循环中，匿名函数内的 `i` 都会引用到同一个 `i` 值。

3.因为 `setTimeout` 的回调函数是异步执行的，所以在所有循环迭代完成后，这些回调函数才会依次执行。

4.由于 `i` 在循环结束后已经变为10，所以每次 `setTimeout` 执行时，输出的 `i` 都会是10，而不是预期的0到9。

因此，这段代码最终会连续输出10次数字10。

下面这一段代码，是前端开发招聘笔试中经常出现的，目的是考察闭包以及setTimeout的运行机制。 for(var i = 0; i < 10; i++){ setTimeout(function(){ console.log(i); },0); } 首先要了解setTimeout的运行机制，他是要等到所有可执行的代码运行完毕以后再执行，所以不管后面的duration是多少，都要等到for循环结束才运行，此时i作为一个全局变量的值为10，因此控制台会打印10个10。 要解决这个问题，有以下几个方案： 一是使用闭包，改变setTimeout的环境变量。 for(var i = 0; i < 10; i++){ f(i); } function f(index){ setTimeout(function(){ console.log(index); },0); } 二是使用bind(),即当需要运行次函数时，将合适的参数传进去。 for(var i = 0; i < 10; i++){ setTimeout(function(index){ console.log(index); }.bind(this,i),0); } 三是使用ES6的新定义变量方法let。 for(let i = 0; i < 10; i++){ setTimeout(function(){ console.log(i); },0); } 最后运行的结果就是0到9十个数字。