快捷導(dǎo)航

javascript中的event loop事件循環(huán)詳解

更新時(shí)間：2018年12月14日 08:36:05 作者：薛小白

這篇文章主要給大家介紹了關(guān)于javascript中event loop事件循環(huán)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

javascript是單線程的語(yǔ)言，也就是說(shuō)，同一個(gè)時(shí)間只能做一件事。而這個(gè)單線程的特性，與它的用途有關(guān)，作為瀏覽器腳本語(yǔ)言，JavaScript的主要用途是與用戶互動(dòng)，以及操作DOM。這決定了它只能是單線程，否則會(huì)帶來(lái)很復(fù)雜的同步問(wèn)題。比如，假定JavaScript同時(shí)有兩個(gè)線程，一個(gè)線程在某個(gè)DOM節(jié)點(diǎn)上添加內(nèi)容，另一個(gè)線程刪除了這個(gè)節(jié)點(diǎn)，這時(shí)瀏覽器應(yīng)該以哪個(gè)線程為準(zhǔn)？

為了利用多核CPU的計(jì)算能力，HTML5提出Web Worker標(biāo)準(zhǔn)，允許JavaScript腳本創(chuàng)建多個(gè)線程，但是子線程完全受主線程控制，且不得操作DOM。所以，這個(gè)新標(biāo)準(zhǔn)并沒(méi)有改變JavaScript單線程的本質(zhì)

這是今天一個(gè)朋友發(fā)給我的一個(gè)面試題，

感覺(jué)還挺有意思的，

寫(xiě)個(gè)博客以供分享

先看看這個(gè)面試題目：

觀察下面的代碼，寫(xiě)出輸出結(jié)果

console.log('0')
setTimeout(function () {
 console.log('1');
});

new Promise(function(resolve,reject){
 console.log('2')
 resolve(3)
}).then(function(val){
 console.log(val)
})
console.log(4)

輸出結(jié)果： “0” “2” 4 3 “1”

今天主要是分析為什么輸出結(jié)果是這樣的？這就和 javascript 的執(zhí)行機(jī)制密切相關(guān)了.

Event Queue 和 Event Loop

javascript 是一門(mén)單線程的語(yǔ)言, 這就意味著在執(zhí)行代碼的時(shí)候, 都只有一個(gè)主線程來(lái)處理所有的任務(wù).

我們都知道 javascript 包括同步代碼和異步代碼, 那么 javascript 是怎么處理這兩種情況的呢?

同步和異步任務(wù)分別進(jìn)入不同的執(zhí)行場(chǎng)所, 同步的進(jìn)入主線程，異步的進(jìn)入 Event Table 并注冊(cè)函數(shù)
當(dāng)指定的事情完成時(shí), Event Table 會(huì)將這個(gè)函數(shù)(回調(diào)函數(shù))移入 Event Queue
主線程內(nèi)的任務(wù)執(zhí)行完畢為空, 會(huì)去 Event Queue 讀取對(duì)應(yīng)的函數(shù)，進(jìn)入主線程執(zhí)行
上述過(guò)程會(huì)不斷重復(fù), 也就是常說(shuō)的 Event Loop(事件循環(huán))

這里我們引進(jìn)了 Event Queue 事件隊(duì)列這一概念. 所有異步操作的回調(diào)都會(huì)進(jìn)入到這里. 然后等到主線程空閑, 就會(huì)從這里調(diào)取回調(diào)執(zhí)行.

setTimeout

setTimeout 相信大家都有使用過(guò), 可以延時(shí)執(zhí)行并且是異步執(zhí)行的.

但是有時(shí)候我們得到的結(jié)果往往是代碼實(shí)際執(zhí)行的時(shí)間比我們想要延時(shí)執(zhí)行的時(shí)間要久。這又是為什么呢?

這就和我們之前所說(shuō)的 Event Loop 有關(guān)了, 我們可以來(lái)具體看下 setTimeout 的執(zhí)行步驟:

setTimeout(function () {
asyncFn()
}, 1000);

syncFn()

asyncFn 將異步執(zhí)行函數(shù)放在 Event Table, 并且開(kāi)始計(jì)時(shí)
開(kāi)始執(zhí)行 syncFn, 但是 syncFn 可能需要處理的內(nèi)容很多, 執(zhí)行時(shí)間超過(guò) 1 秒, 但是計(jì)時(shí)還在繼續(xù)
計(jì)時(shí)到達(dá) 1 秒, setTimeout 延時(shí)完成, asyncFn 進(jìn)入 Event Queue 事件隊(duì)列, 但是主線程還在執(zhí)行, 所以只能等待
syncFn 執(zhí)行完成, 此時(shí) asyncFn 從事件隊(duì)列中進(jìn)入主線程執(zhí)行

所以有時(shí)候會(huì)出現(xiàn)代碼實(shí)際執(zhí)行時(shí)間比延時(shí)時(shí)間長(zhǎng)的情況。

宏任務(wù)和微任務(wù)

之前我們說(shuō)過(guò)異步任務(wù)會(huì)進(jìn)入到事件隊(duì)列中, 不同類型的任務(wù)會(huì)進(jìn)入到不同的隊(duì)列中, 比如宏任務(wù)會(huì)進(jìn)入到宏任務(wù)隊(duì)列中, 微任務(wù)會(huì)進(jìn)入到微任務(wù)隊(duì)列中.

我們只要記住當(dāng)當(dāng)前執(zhí)行棧執(zhí)行完畢時(shí)會(huì)立刻先處理所有微任務(wù)隊(duì)列中的事件，然后再去宏任務(wù)隊(duì)列中取出一個(gè)事件。同一次事件循環(huán)中，微任務(wù)永遠(yuǎn)在宏任務(wù)之前執(zhí)行

這時(shí)候我們就可以解釋一開(kāi)始的代碼執(zhí)行結(jié)果了: