摘要：當然相比較，說出答案至少比答案多知道函數的用法，重點不在那個延遲，重點在函數與作用域鏈，后面會細說。

最近一道面試試題非?；馃?，堪稱面試界網紅：

function test(){
     for (var i=0; i<5; i++) { 
        setTimeout( function timer() {
            console.log(new Date(),i);
        }, 1000*i );
    }
    console.log("end",new Date(),i); //為方便后邊演示，這里加了打印end標志
}

不理解閉包，變量作用域和setTimeout函數的同學很多會給出答案A：0,1,2,3,4,5和答案B：5，0,1,2,3,4;不奇怪，但正確答案卻是5,5,5,5,5，且是隔一秒出來一個。當然相比較，說出答案B至少比答案A多知道setTimeout函數的用法，重點不在那個延遲1000*i ms，重點在setTimeout函數與作用域鏈，后面會細說。
首先三個概念：
setTimeout(code,millisec)函數：用于在指定的毫秒數后調用函數或計算表達式，接受兩個參數，第一個參數為一個函數或計算表達式，我們通過該函數定義將要執行的操作。第二個參數為一個時間毫秒數，表示延遲執行的時間。至于什么異步調用，隊列這些概念，這里不做詳述，可閱讀：http://www.alloyteam.com/2015...
函數作用域：函數內部定義的變量與外部定義的變量，外部指包含這個函數的空間，是父子關系，二不是兄弟，編過程的應該都理解；無論函數在哪里被調用，也無論它如何被調用，它的詞法作用域都只由函數被聲明時所處的位置決定；
閉包：閉包（Closure）是詞法閉包（Lexical Closure）的簡稱，是引用了自由變量的函數。這個被引用的自由變量將和這個函數一同存在，即使已經離開了創造它的環境也不例外。詳細運用，推薦讀：http://www.ruanyifeng.com/blo...，個人還是推薦紅寶書上面的講解。
等明白上面第一個settimeout概念后，最后一行為什么先打印最后一行的結果了；
明白變量作用域后，就會明白console.log("end",new Date(),i)中的i是for循環聲明的那個i變量，因為var聲明的變量不存在代碼塊（{}）作用域的概念，所以最后打印的值是5；
明白函數后，和變量作用域一起理解，我們可以得出類似如下所示的圖（如果理解不正確，還請大神指正）

在for循環聲明的五個TimeOut Callback函數都有對變量i的引用（這里的引用不是引用類型的引用，而是i作為函數作用域鏈的一個變量，由于閉包造成的），而不是拷貝。因為5個timeout函數都涉及到延遲執行的情況，所以當主線程執行完后（end被打印時），timeout這些回調依次執行（隊列：FIFO），此時i的值已經為5了，知道以上這些，后面就簡單多了。

開始回到正題：
其實寫出這個函數期望輸出5，0,1,2,3,4，要達到這個結果，方法有多種，這里列出典型的三種：
方法1：IIFE：

function test(){
    for (var i = 0; i < 5; i++) {
     (function(j) { // j = i
      setTimeout(function() {
       console.log(new Date, j);
      }, 1000*j);
     })(i);
    }
    console.log(new Date, i);
}

方法2：函數調用按值傳遞：

var output = function (i) {
     setTimeout(function() {
      console.log(new Date, i);
     }, 1000);
};
function test(){
    for (var i = 0; i < 5; i++) {
     output(i); // 這里傳過去的 i 值被復制，而不是引用
    }
    console.log(new Date, i);
}

方法2：函數調用按值傳遞技巧版(利用setTimeout第三個參數)：

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

方法3： ES6 使用le指令聲明：

function test(){
     for (let i=0; i<5; i++) { 
        setTimeout( function timer() {
            console.log(new Date(),i);
        }, 1000 );
    }
 //   console.log("end",new Date(),i);  //因為變量作用域的問題，這里會報i 不存在，未聲明    
}

細度上面的三種方法，其實他們相似度很高。首先方法1（聲明即執行）和方法2（提前聲明，調用時執行），其實他們的思路完全一致，都利用了JavaSrcipt中函數基本類型變量傳值，都是值的拷貝，而不是值的引用，然后通過在for循環中執行一個閉包函數，建立一個閉包作用域，來保證引用的i值為注冊該回調函數時的值。立即即執行，如果看著別扭，下面這樣寫也是可以的：

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

簡化版：

    function test(){
        for (var i = 0; i < 5; i++) {
         (function(j) { // j = i
          setTimeout(function() {
          return function(){
                         console.log(new Date, j);
          }
          }, 1000);
         })(i);
        }
        console.log(new Date, i);
    }        

然后方法3，是利用ES6 let命令聲明變量塊級作用域的概念，和前面for循環使用var聲明i不同的是，var聲明的i在整個test()函數作用域內有效，每一次循環， 新的i值都會覆蓋舊值；而let聲明的， 當前的i只在本輪循環有效， 所以每一次循環的i其實都是一個新的變量，所以也導致打印end時，報i 不存在，未聲明的錯誤，這就是塊級作用域的效果，所以5個timeout回調函數雖然都引用了變量i,但實際上這5個i是獨立的，僅在自己的塊級作用域內有效，其寫法類似于：

   function test(){
    for (var i=0; i<5; i++) { 
      let j =i;
        setTimeout( function timer() {
            console.log(new Date(),j);
        }, 1000 );
    }
    console.log("end",new Date(),i); 
}

所以總體來看，上面的方法解決的思路都是從作用域這個概念上下手的，前兩者利用function聲明形成了自己的作用域，后者利用let命令形成的塊級作用域，而來確保對i值的正確引用。
以上就是自己對這個網紅面試題的深入理解，如果有說的有錯或模棱兩可的地方，還請不吝指教。