一、背景

最近在翻看以前的老書《node.js開發指南》，恰好碰到 for 循環 + setTimeout 的經典例子，于是重新梳理了思路并記錄下。

二、寫在前面，setTimeout 和 setInterval 的執行機制

在日常編碼中，你會發現，給 setTimeout 和 setInterval 設定延遲時間往往并不準，或者干脆 setTimeout(function(){xxx},0) 也不是立馬執行（特別是有耗時代碼在前），這是因為 js 是單線程的，有一個事件隊列機制，setTimeout 和 setInterval 的回調會到了延遲時間塞入事件隊列中，排隊執行。

setTimeout ：延時 delay 毫秒之后，啥也不管，直接將回調函數加入事件隊列。

setInterval ：延時 delay 毫秒之后，先看看事件隊列中是否存在還沒有執行的回調函數（ setInterval 的回調函數），如果存在，就不要再往事件隊列里加入回調函數了。

看下面示例：

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

結果：1 秒之后，同時輸出 5 個 5。

因為 for 循環會先執行完（同步優先于異步優先于回調），這時五個 setTimeout 的回調全部塞入了事件隊列中，然后 1 秒后一起執行了。

三、正文

接下來就是那道經典的代碼：

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

結果：5 5 5 5 5

為什么不是 1 2 3 4 5，問題出在作用域上。

因為 setTimeout 的 console.log(i); 的i是 var 定義的，所以是函數級的作用域，不屬于 for 循環體，屬于 global。等到 for 循環結束，i 已經等于 5 了，這個時候再執行 setTimeout 的五個回調函數（參考上面對事件機制的闡述），里面的 console.log(i); 的 i 去向上找作用域，只能找到 global下 的 i，即 5。所以輸出都是 5。

解決辦法：人為給 console.log(i); 創造作用域，保存i的值。

解決辦法一

for (var i = 0; i < 5; i++) {   (function(i){   //立刻執行函數    setTimeout(function (){      console.log(i);      },1000);   })(i); }

這里用到立刻執行函數。這樣 console.log(i); 中的i就保存在每一次循環生成的立刻執行函數中的作用域里了。

解決辦法二

for (let i = 0; i < 5; i++) {   //let 代替 var  setTimeout(function (){    console.log(i);    },1000); }

let 為代碼塊的作用域，所以每一次 for 循環，console.log(i); 都引用到 for 代碼塊作用域下的i，因為這樣被引用，所以 for 循環結束后，這些作用域在 setTimeout 未執行前都不會被釋放。

四、補充

在寫示例代碼的過程中，發現一個語法點：

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