[[208795]]

我在詳細(xì)圖解作用域鏈與閉包一文中的結(jié)尾留下了一個(gè)關(guān)于setTimeout與循環(huán)閉包的思考題。

利用閉包，修改下面的代碼，讓循環(huán)輸出的結(jié)果依次為1， 2， 3， 4， 5

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

值得高興的是很多朋友在讀了文章之后確實(shí)對(duì)閉包有了更加深刻的了解，并準(zhǔn)確的給出了幾種寫(xiě)法。一些朋友能夠認(rèn)真的閱讀我的文章并且一個(gè)例子一個(gè)例子的上手練習(xí)，這種認(rèn)可對(duì)我而言真的非常感動(dòng)。但是也有一些基礎(chǔ)稍差的朋友在閱讀了之后，對(duì)于這題的理解仍然感到困惑，因此應(yīng)一些讀者老爺?shù)囊?，借此文章?zhuān)門(mén)對(duì)setTimeout進(jìn)行一個(gè)相關(guān)的知識(shí)分享，愿大家讀完之后都能夠有新的收獲。

在最初學(xué)習(xí)setTimeout的時(shí)候，我們很容易知道setTimeout有兩個(gè)參數(shù)，***個(gè)參數(shù)為一個(gè)函數(shù)，我們通過(guò)該函數(shù)定義將要執(zhí)行的操作。第二個(gè)參數(shù)為一個(gè)時(shí)間毫秒數(shù)，表示延遲執(zhí)行的時(shí)間。

setTimeout(function() { 
    console.log('一秒鐘之后我將被打印出來(lái)') 
}, 1000)  

上例執(zhí)行結(jié)果

可能不少人對(duì)于setTimeout的理解止步于此，但還是有不少人發(fā)現(xiàn)了一些其他的東西，并在評(píng)論里提出了疑問(wèn)。比如上圖中的這個(gè)數(shù)字7，是什么?

每一個(gè)setTimeout在執(zhí)行時(shí)，會(huì)返回一個(gè)***ID，上圖中的數(shù)字7，就是這個(gè)***ID。我們?cè)谑褂脮r(shí)，常常會(huì)使用一個(gè)變量將這個(gè)***ID保存起來(lái)，用以傳入clearTimeout，清除定時(shí)器。

var timer = setTimeout(function() { 
 
console.log('如果不清除我，我將會(huì)一秒之后出現(xiàn)。'); 
 
}, 1000) 
 
clearTimeout(timer); // 清除之后，通過(guò)setTimeout定義的操作并不會(huì)執(zhí)行  

接下來(lái)，我們還需要考慮另外一個(gè)重要的問(wèn)題，那就是setTimeout中定義的操作，在什么時(shí)候執(zhí)行?為了引起大家的重視，我們來(lái)看看下面的例子。

var timer = setTimeout(function() { 
 
console.log('setTimeout actions.'); 
 
}, 0); 
 
console.log('other actions.'); 
 
// 思考一下，當(dāng)我將setTimeout的延遲時(shí)間設(shè)置為0時(shí)，上面的執(zhí)行順序會(huì)是什么?  

在瀏覽器中的console中運(yùn)行試試看，很容易就能夠知道答案，如果你沒(méi)有猜中答案，那么我這篇文章就值得你點(diǎn)一個(gè)贊了，因?yàn)榻酉聛?lái)我分享的小知識(shí)，可能會(huì)在筆試中救你一命。

在對(duì)于執(zhí)行上下文的介紹中，我與大家分享了函數(shù)調(diào)用棧這種特殊數(shù)據(jù)結(jié)構(gòu)的調(diào)用特性。在這里，將會(huì)介紹另外一個(gè)特殊的隊(duì)列結(jié)構(gòu)，頁(yè)面中所有由setTimeout定義的操作，都將放在同一個(gè)隊(duì)列中依次執(zhí)行。

我用下圖跟大家展示一下隊(duì)列數(shù)據(jù)結(jié)構(gòu)的特點(diǎn)。

隊(duì)列：先進(jìn)先出

而這個(gè)隊(duì)列執(zhí)行的時(shí)間，需要等待到函數(shù)調(diào)用棧清空之后才開(kāi)始執(zhí)行。即所有可執(zhí)行代碼執(zhí)行完畢之后，才會(huì)開(kāi)始執(zhí)行由setTimeout定義的操作。而這些操作進(jìn)入隊(duì)列的順序，則由設(shè)定的延遲時(shí)間來(lái)決定。

因此在上面這個(gè)例子中，即使我們將延遲時(shí)間設(shè)置為0，它定義的操作仍然需要等待所有代碼執(zhí)行完畢之后才開(kāi)始執(zhí)行。這里的延遲時(shí)間，并非相對(duì)于setTimeout執(zhí)行這一刻，而是相對(duì)于其他代碼執(zhí)行完畢這一刻。所以上面的例子執(zhí)行結(jié)果就非常容易理解了。

為了幫助大家理解，再來(lái)一個(gè)結(jié)合變量提升的更加復(fù)雜的例子。如果你能夠正確看出執(zhí)行順序，那么你對(duì)于函數(shù)的執(zhí)行就有了比較正確的認(rèn)識(shí)了，如果還不能，就回過(guò)頭去看看其他幾篇文章。

setTimeout(function() { 
    console.log(a); 
}, 0); 
  
var a = 10; 
  
console.log(b); 
console.log(fn); 
  
var b = 20; 
  
function fn() { 
    setTimeout(function() { 
        console.log('setTImeout 10ms.'); 
    }, 10); 
} 
  
fn.toString = function() { 
    return 30; 
} 
  
console.log(fn); 
  
setTimeout(function() { 
    console.log('setTimeout 20ms.'); 
}, 20); 
  
fn();  

上栗執(zhí)行結(jié)果

OK，關(guān)于setTimeout就暫時(shí)先介紹到這里，我們回過(guò)頭來(lái)看看那個(gè)循環(huán)閉包的思考題。

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

如果我們直接這樣寫(xiě)，根據(jù)setTimeout定義的操作在函數(shù)調(diào)用棧清空之后才會(huì)執(zhí)行的特點(diǎn)，for循環(huán)里定義了5個(gè)setTimeout操作。而當(dāng)這些操作開(kāi)始執(zhí)行時(shí)，for循環(huán)的i值，已經(jīng)先一步變成了6。因此輸出結(jié)果總為6。而我們想要讓輸出結(jié)果依次執(zhí)行，我們就必須借助閉包的特性，每次循環(huán)時(shí)，將i值保存在一個(gè)閉包中，當(dāng)setTimeout中定義的操作執(zhí)行時(shí)，則訪(fǎng)問(wèn)對(duì)應(yīng)閉包保存的i值即可。

而我們知道在函數(shù)中閉包判定的準(zhǔn)則，即執(zhí)行時(shí)是否在內(nèi)部定義的函數(shù)中訪(fǎng)問(wèn)了上層作用域的變量。因此我們需要包裹一層自執(zhí)行函數(shù)為閉包的形成提供條件。

因此，我們只需要2個(gè)操作就可以完成題目需求，一是使用自執(zhí)行函數(shù)提供閉包條件，二是傳入i值并保存在閉包中。

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

利用斷點(diǎn)調(diào)試，在chrome中查看執(zhí)行順序與每一個(gè)閉包中不同的i值

當(dāng)然，也可以在setTimeout的***個(gè)參數(shù)處利用閉包。

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