【javascript知识进阶】关于for循环中定义setTimeout

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

上面的代码不会输出数字 0 到 9，而是会输出数字 10 十次，而且是同时输出。

可见，外部循环完毕后才对settimeout进行了定义，即i值变成10以后，所以实际上定义了十个i为10的timeout函数。

为什么呢？或许下面这个例子会让我们更直接的看到问题的答案：

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

输出结果是100。

页面中所有由setTimeout定义的操作，都将放在同一个队列中依次执行。

而这个队列执行的时间，需要等待到函数调用栈清空之后才开始执行。即所有可执行代码执行完毕之后，才会开始执行由setTimeout定义的操作。而这些操作进入队列的顺序，则由设定的延迟时间来决定。

了解了这些，上面的代码为什么出现这样的结果就很明显了：setTimeout定义时，所有的外部代码都执行完毕了，也就是说，在setTimeout所在的作用域中，其他代码会影响到我们所设定的时间值。

所以解决这个问题，我们只需要限制它的作用域就可以了，让这段作用域中只执行定义setTimeout的代码。

我们和可以用一个自执行函数来限制它的作用域，看起来就像给settimeout函数外部又“包”了一个函数，实际上这就形成了一个闭包。

其实广泛上来讲闭包判定的准则：即执行时是否在内部定义的函数中访问了上层作用域的变量。

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

这个自执行函数内部没有什么能改变变量i的代码了，所以进入该函数后settimeout就会马上被定义。外部的for循环无论怎么改变都不会影响传入该作用域的i值。

有另一个方法完成同样的工作，那就是从匿名包装器中返回一个函数。这和上面的代码效果一样。

for(var i = 0; i < 10; i++) {    setTimeout((function(e) {        return function() {            console.log(e);        }    })(i), 1000)}