for循环+setTimeout的延迟操做

例子：

1 for (var i = 0; i < 5; i++) {
2     setTimeout(function () {
3         console.log(i);
4     }, 100)
5 }

上述代码，输出结果显而易见是5个5，且并无任何的延迟效果。那么为何呢？

       首先这样的结果须要从JS的执行机制提及。JS是单线程环境，也就是说代码的执行是从上到下，依次执行。这样的执行称为同步执行。由于种种不要浪费和节约的缘由。JS中引进了异步的机制。在这段代码中，哪一个是同步哪一个是异步呢？for循环是同步代码，而setTimeout中的是异步代码。那么JS碰到这个有同步和异步的状况下会先从上到下执行同步代码，碰到异步的代码会将其插入到任务队列当中等待。而setTimeout是延时，也就是说碰到setTimeout这个异步的代码块会根据它里面的第二个参数：延时时间来将代码插入到任务队列当中，好比上面这段代码中，第二个参数延时时间是100，也就是说执行到它的时候会在100ms以后将它插入到任务队列当中。同步代码都执行完成以后，那么JS引擎就空闲了，这个时候就轮到任务队列中的异步代码依次加载了。
      这是上面这段代码的答案的一半。另外一半就来自于做用域，做用域是变量等资源的做用范围。在这段代码中准确的说是做用域链的问题，当同步代码执行完毕开始执行异步的setTimeout代码时，setTimeout中须要一个变量i,而执行的时候在当前的做用域中开始找，找不到变量i的定义，这个时候就把建立这个函数的做用域做为当前做用域，再次寻找，建立这个函数的做用域就是全局做用域，也就是找到了for循环中i，找到了以后就结束寻找变量i的行程。因为这个时候的i是全局的，并且人家已经变为了最终形态：5，setTimeout找到的就是这个i=5；因此就输出了5，下面的4次setTimeout 的执行都是相似，因此结果都是5；
因此我对这个答案的理解归结起来就是  异步加载+做用域链。

正确写法：

1 for (var i = 0; i < 5; i++) {
2     (function (i) {
3         setTimeout(function () {
4             console.log(i);
5         }, 100 * i);
6     })(i);
7 }

将延迟操做闭包，当即执行。