2018-5-7 周周
話不多說(shuō)，先上代碼：
for(var j=0;j<10;J++){
setTimeout(function(){console.log(j);},5000)
}
看到這三行代碼，你也許會(huì)不耐煩道：又要講閉包？要吐槽了好么？別急，讓我們先來(lái)思考一下，這段代碼在瀏覽器中的執(zhí)行結(jié)果是什么？
<!-- more -->
甲：順序打印0到9？
乙：這題我見(jiàn)過(guò)，打印十個(gè)10！
哪個(gè)答案正確？
執(zhí)行結(jié)果顯示，瀏覽器打印出十個(gè)10，貌似乙對(duì)了，但是如果你足夠細(xì)心，你會(huì)發(fā)現(xiàn)幾個(gè)問(wèn)題：為什么會(huì)循環(huán)打印十個(gè)10,而不是0到9？
從結(jié)果來(lái)看，for循環(huán)執(zhí)行完跳出之后，才開(kāi)始執(zhí)行setTimeout（所以j才等于10），為什么不是每次迭代都執(zhí)行一次setTimeout呢？
1、為什么會(huì)循環(huán)打印十個(gè)10？
許多人習(xí)慣用第二個(gè)問(wèn)題中的執(zhí)行結(jié)果來(lái)回答這個(gè)問(wèn)題：“for循環(huán)執(zhí)行完畢跳出之后才開(kāi)始執(zhí)行setTimeout，所以才打印了十個(gè)10”。這樣的答案，只能說(shuō)是既應(yīng)付了自己，又應(yīng)付了別人。其實(shí)，要解答第一個(gè)問(wèn)題，首先要解答第二個(gè)問(wèn)題。
2、為什么不是每一次迭代都執(zhí)行一次setTimeout？
大家都知道，JavaScript在ES6出現(xiàn)以前，是沒(méi)有塊狀作用域的，這就意味著，在for循環(huán)中用var定義的變量j，其實(shí)是屬于全局的，那其實(shí)整個(gè)全局作用域中只有一個(gè)j，每次for循環(huán)都是更新這個(gè)j。
那么現(xiàn)在的關(guān)鍵問(wèn)題在于，為什么整個(gè)for循環(huán)會(huì)先于setTimeout執(zhí)行，而不是我們正常理解的，一次迭代執(zhí)行一次。這就涉及到了JavaScript的核心特性：?jiǎn)尉€程。
JavaScript設(shè)計(jì)的初衷，是瀏覽器用來(lái)與用戶進(jìn)行交互和DOM操作的，這就決定了它必須是單線程的。設(shè)想JavaScript同時(shí)有兩個(gè)線程，一個(gè)線程在DOM節(jié)點(diǎn)內(nèi)添加內(nèi)容，一個(gè)線程刪除該節(jié)點(diǎn)，瀏覽器就會(huì)出現(xiàn)混亂。所以，為了避免復(fù)雜性，從一誕生，JavaScript就是單線程，這已經(jīng)成為了這門(mén)語(yǔ)言的核心特征，將來(lái)也不會(huì)改變。
單線程就意味著，所有任務(wù)需要排隊(duì)，前一個(gè)任務(wù)結(jié)束，才會(huì)執(zhí)行下一個(gè)任務(wù)，如果前一個(gè)任務(wù)耗時(shí)很長(zhǎng)，后一個(gè)任務(wù)就不得不一直等著。
為了優(yōu)化單線程的性能，JavaScript將任務(wù)分成兩種，一種是同步任務(wù)（synchronous），另一種是異步任務(wù)（asynchronous）。同步任務(wù)指的是，在主線程上排隊(duì)執(zhí)行的任務(wù)，只有前一個(gè)任務(wù)執(zhí)行完畢，才能執(zhí)行后一個(gè)任務(wù)；異步任務(wù)指的是，不進(jìn)入主線程，而進(jìn)入“任務(wù)隊(duì)列（task queue）”的任務(wù)，只用主線程中的同步任務(wù)執(zhí)行完畢，異步任務(wù)才會(huì)進(jìn)入執(zhí)行隊(duì)列執(zhí)行。只要主線程空了，就會(huì)去讀取“任務(wù)隊(duì)列”，這就是JavaScript的運(yùn)作機(jī)制。這個(gè)過(guò)程會(huì)不斷重復(fù)。
而setTimeout就被JavaScript定義為異步任務(wù)。每次for循環(huán)的迭代，都將setTimeout中的回調(diào)函數(shù)加入任務(wù)隊(duì)列等待執(zhí)行。也就是說(shuō)，只有同步任務(wù)中的for循環(huán)完全結(jié)束，主線程中才會(huì)去任務(wù)列表中找到尚未執(zhí)行的十個(gè)setTimeout（十次迭代）回調(diào)函數(shù)并順序執(zhí)行（先進(jìn)先出）。而此時(shí)，j已經(jīng)經(jīng)過(guò)循環(huán)結(jié)束變成了10，所以此時(shí)主線程執(zhí)行的，是十個(gè)一模一樣的打印i的回調(diào)函數(shù)，即打印十個(gè)10,。至此完美回答了第一和第二個(gè)問(wèn)題，文章開(kāi)頭的代碼與下面的代碼其實(shí)是等價(jià)的：
for(var i=0;i<10;i++){
setTimeout(console.log(i),5000);
setTimeout(console.log(i),5000);
setTimeout(console.log(i),5000);
setTimeout(console.log(i),5000);
setTimeout(console.log(i),5000);
setTimeout(console.log(i),5000);
setTimeout(console.log(i),5000);
setTimeout(console.log(i),5000);
setTimeout(console.log(i),5000);
setTimeout(console.log(i),5000);
}
小小的一個(gè)setTimeout，牽扯出了很多JavaScript的深層次問(wèn)題，可見(jiàn)JavaScript還有許多地方是值得深入探究的。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.wnxcall.com