var test = function(){
alert("test");
}
var test2 = function(){
alert("test2");
}
setTimeout(function(){
alert("setTimeout");
},1000);
test();
test2();
//test
//test2
//setTimeout;
上面代碼的運(yùn)行結(jié)果一直讓我很費(fèi)解，為什么test()和test2()沒有在setTimeout()之后才執(zhí)行，相當(dāng)于先執(zhí)行了定時(shí)器外面的函數(shù)，而后再執(zhí)行定時(shí)器里的函數(shù)，這是為什么呢？在解釋之前，我們有必要知道JavaScript的運(yùn)行機(jī)制。
一、JavaScript為什么是單線程
要回答這個(gè)問題，只要我們假設(shè)一下，如果JavaScript支持多線程，一個(gè)線程在某個(gè)DOM節(jié)點(diǎn)上添加內(nèi)容，另外一個(gè)線程刪除了這個(gè)節(jié)點(diǎn)，那么瀏覽器該以哪個(gè)線程為準(zhǔn)呢？所以答案也就不言而喻了。為了避免復(fù)雜性，JavaScript從誕生就是單線程。
在HTML5中，推出了web worker標(biāo)準(zhǔn)，允許JavaScript腳本創(chuàng)建多個(gè)線程，但是子線程完全受主線程的控制，且不得操作DOM，所以也是沒有違背JavaScript單線程的本質(zhì)。
二、任務(wù)隊(duì)列
因?yàn)镴avaScript是單線程，意味著任務(wù)要一個(gè)接著一個(gè)完成，但是，如果前一個(gè)任務(wù)執(zhí)行時(shí)間很長(zhǎng)，那么后面的任務(wù)就得一直阻塞著，這樣用戶體驗(yàn)十分差。
JavaScript的設(shè)計(jì)者考慮到了這一點(diǎn)，所以他將JavaScript的任務(wù)分為兩種，在主線程上執(zhí)行的任務(wù)"同步任務(wù)"，被主線程掛載起來的任務(wù)"異步任務(wù)",后者一般是放在一個(gè)叫任務(wù)隊(duì)列的數(shù)據(jù)結(jié)構(gòu)中。
那么一般異步執(zhí)行運(yùn)行機(jī)制如下(也是JavaScript的運(yùn)行機(jī)制)：
- (1)所有同步任務(wù)都在主線程上執(zhí)行，形成一個(gè)執(zhí)行棧。
- (2)主線程之外，還有一個(gè)“任務(wù)隊(duì)列”,只要異步任務(wù)有了運(yùn)行結(jié)果，就在“任務(wù)隊(duì)列”之中放置一個(gè)事件。
- (3)一旦“執(zhí)行棧”中的所有同步任務(wù)執(zhí)行完畢了，系統(tǒng)就會(huì)讀取“任務(wù)隊(duì)列”，看看里面有哪些事件。那些對(duì)應(yīng)的異步任務(wù)，于是結(jié)束等待狀態(tài)，進(jìn)入執(zhí)行棧，開始執(zhí)行。
- (4)主線程不斷重復(fù)上面的三步。（事件循環(huán)）
參考圖片(圖片來源 阮一峰老師講解的JavaScript運(yùn)行機(jī)制詳解)
三、事件和回調(diào)函數(shù)
看了前面的講解，我一開始提出的問題視乎可以這樣理解，test()和test2()屬于“執(zhí)行棧”中的同步任務(wù)，而定時(shí)器則是任務(wù)隊(duì)列里面的異步任務(wù)，那么定時(shí)器就是屬于異步任務(wù)中的一種，在講定時(shí)器之前先認(rèn)識(shí)一下任務(wù)隊(duì)列里面的另外一個(gè)重要成員，事件。其實(shí)任務(wù)隊(duì)列就是一個(gè)事件隊(duì)列，因?yàn)橐话阄覀兘壎ㄒ粋€(gè)事件，比如點(diǎn)擊事件等等，都是在某一個(gè)時(shí)刻才觸發(fā)執(zhí)行的，這個(gè)時(shí)候就得放到任務(wù)隊(duì)列里面，等待執(zhí)行，而在某個(gè)DOM節(jié)點(diǎn)上綁定了事件，就要有相應(yīng)的回調(diào)函數(shù),它們是相輔相成的。
所謂回調(diào)函數(shù)，就是那些被掛載起來，等待執(zhí)行的代碼，主線程執(zhí)行任務(wù)隊(duì)列里面的異步任務(wù)，其實(shí)就是執(zhí)行這些回調(diào)函數(shù)。
一般只有主線程所有任務(wù)都執(zhí)行完畢了，才會(huì)執(zhí)行任務(wù)隊(duì)列里面的異步任務(wù)，一般是按照隊(duì)列的“先進(jìn)先出”順序執(zhí)行，但是因?yàn)榇嬖?code>定時(shí)器，所以主線程要檢查執(zhí)行時(shí)間，只有到了規(guī)定的時(shí)間，才能返回主線程。
四、定時(shí)器
終于到特殊的定時(shí)器了，定時(shí)器主要由setTimeout()和setInterval()兩個(gè)函數(shù)來完成，它們的內(nèi)部運(yùn)行機(jī)制完全一樣，不同的只是，前者一次性執(zhí)行，而后者反復(fù)執(zhí)行。定時(shí)器，屬于任務(wù)隊(duì)列中的異步任務(wù)，所以才會(huì)出現(xiàn)上面的問題，再看幾個(gè)例子就能理解了，
console.log(1);
setTimeout(function(){ console.log(2);},1000);
console.log(3);
上面代碼的執(zhí)行結(jié)果是1,3,2，因?yàn)橹挥衧etTimeout里面的代碼是異步任務(wù)，其它都是主線程里的同步任務(wù)，所以只有執(zhí)行完了主線程中的所有任務(wù)，才會(huì)執(zhí)行setTimeout中的任務(wù)。
