一直對(duì)js的事件循環(huán)不是很清晰，最近看了JavaScript忍者秘籍的第13章后，有了一些感悟，特此總結(jié)一下，分享給大家。

單線程

眾所周知，JavaScript是單線程執(zhí)行模型，同一時(shí)刻只能執(zhí)行一個(gè)代碼片段，一個(gè)任務(wù)開(kāi)始后知道運(yùn)行完成，不會(huì)被其他任務(wù)中斷。當(dāng)一個(gè)任務(wù)花費(fèi)的時(shí)間很長(zhǎng)的話，用戶就會(huì)明顯的感覺(jué)到卡頓。瀏覽器為了解決這個(gè)問(wèn)題引入了事件循環(huán)的概念（Event Loop）。

事件循環(huán)

事件循環(huán)具有至少兩個(gè)隊(duì)列處理任務(wù)。任務(wù)分為兩類，宏任務(wù)（macro-task）和微任務(wù)（micro-task）。

1.宏任務(wù)代表一個(gè)個(gè)離散、獨(dú)立的工作單元，運(yùn)行完之后，瀏覽器可以繼續(xù)其他的調(diào)度。包括：創(chuàng)建文檔對(duì)象，解析HTML，執(zhí)行JavaScript，以及各種事件…… 2.微任務(wù)是更小的任務(wù)，主要用戶更新應(yīng)用程序的狀態(tài)，必須在瀏覽器任務(wù)繼續(xù)執(zhí)行其他任務(wù)之前執(zhí)行。微任務(wù)需要盡可能快地通過(guò)異步方式執(zhí)行，同時(shí)不能產(chǎn)生全新的微任務(wù)。包括promise、回調(diào)函數(shù)、DOM發(fā)生變化……

僅包含宏任務(wù)

// 主線程JavaScript運(yùn)行15ms btn1.addEventListener('click', function() {運(yùn)行 8ms}, false); btn2.addEventListener('click', function() {運(yùn)行 5ms}, false);

現(xiàn)在假設(shè)主線程運(yùn)行15ms， 在第5ms單擊btn1，在第12ms的時(shí)候單擊btn2。基于單線程執(zhí)行模型，單擊按鈕之后不會(huì)立即執(zhí)行對(duì)應(yīng)的處理函數(shù)，因?yàn)橐粋€(gè)任務(wù)一旦開(kāi)始就不會(huì)被另一個(gè)任務(wù)中斷。因此，在主線程執(zhí)行的15ms期間，按鈕的單擊處理函數(shù)放入隊(duì)列。當(dāng)主線程執(zhí)行完成也就是15ms之后，程序開(kāi)始處理微任務(wù)，因?yàn)楫?dāng)前不存在微任務(wù)，跳過(guò)此步驟，開(kāi)始執(zhí)行更新UI。

之后進(jìn)入第二次循環(huán)，也就是開(kāi)始執(zhí)行btn1的處理函數(shù)，需要運(yùn)行8ms，btn2處理函數(shù)在隊(duì)列中等待。當(dāng)btn1處理函數(shù)執(zhí)行完之后，瀏覽器檢查微任務(wù)是否存在和是否更新UI，刪除任務(wù)隊(duì)列里的btn1的處理函數(shù)。

最后進(jìn)入第三次循環(huán)，開(kāi)始執(zhí)行btn2的處理函數(shù)，需要運(yùn)行5ms，處理函數(shù)執(zhí)行完之后，檢查微任務(wù)和是否需要更新UI，刪除任務(wù)隊(duì)列里的btn2的處理函數(shù)，最終任務(wù)隊(duì)列為空，循環(huán)結(jié)束。

同時(shí)含有宏任務(wù)和微任務(wù)

// 主線程JavaScript運(yùn)行15ms btn1.addEventListener('click', function() {Promise.resolve().then(() => {運(yùn)行 4ms });運(yùn)行 8ms }, false); btn2.addEventListener('click', function() {運(yùn)行 5ms}, false);

本例中在btn1的事件處理函數(shù)里增加了一個(gè)立即兌現(xiàn)的Promise，需要運(yùn)行4ms。

現(xiàn)在代碼的執(zhí)行順序?yàn)?#xff1a;

主線程執(zhí)行15ms，在5ms和12ms的時(shí)候分別將處理函數(shù)放入任務(wù)隊(duì)列，更新UI。

15m后處理btn1事件處理函數(shù)，發(fā)現(xiàn)Promise，放入微任務(wù)隊(duì)列，btn1事件處理函數(shù)繼續(xù)執(zhí)行8ms，檢查微任務(wù)隊(duì)列發(fā)現(xiàn)有Promise回調(diào)函數(shù)，然后開(kāi)始執(zhí)行Promise回調(diào)函數(shù)，運(yùn)行4ms，繼續(xù)檢查微任務(wù)隊(duì)列，如果為空，檢查是否需要更新UI，進(jìn)入下一輪循環(huán)。

處理btn2的事件處理函數(shù)……

計(jì)時(shí)器

// 主線程JavaScript運(yùn)行18ms setTimeout(function() {運(yùn)行6ms; }, 10); setInterval(function() {運(yùn)行8ms; }, 10); btn1.addEventListener('click', function() {運(yùn)行 10ms}, false);

?代碼的執(zhí)行過(guò)程是什么呢？

現(xiàn)在我們想象一下主線程代碼需要運(yùn)行18ms，在第6ms的時(shí)候用戶點(diǎn)擊了按鈕，在第10ms延遲計(jì)時(shí)器到期，間隔計(jì)時(shí)器第一次觸發(fā)。

我們知道一個(gè)任務(wù)一旦開(kāi)始執(zhí)行，就無(wú)法被其他任務(wù)中斷。所以，6ms將事件處理函數(shù)加入隊(duì)列，10ms分別將延遲計(jì)時(shí)器和間隔計(jì)時(shí)器回調(diào)放入隊(duì)列。運(yùn)行到18m主線程執(zhí)行完畢，檢查微任務(wù)隊(duì)列和更新UI，進(jìn)入下一個(gè)時(shí)間循環(huán)。開(kāi)始執(zhí)行btn1事件回調(diào)，運(yùn)行10ms，這時(shí)候在btn1事件回調(diào)運(yùn)行的過(guò)程中，間隔計(jì)時(shí)器第二次到期，但是任務(wù)隊(duì)列里面已經(jīng)有一個(gè)間隔計(jì)時(shí)器處理函數(shù)，所以忽略這個(gè)處理函數(shù)。btn1事件回調(diào)運(yùn)行結(jié)束，檢查微任務(wù)隊(duì)列和更新UI，進(jìn)入下一個(gè)事件循環(huán)。開(kāi)始執(zhí)行延遲計(jì)時(shí)器處理函數(shù)，運(yùn)行6ms，在這個(gè)過(guò)程中間隔計(jì)時(shí)器第三次到期，但是由于任務(wù)隊(duì)列已經(jīng)有了處理函數(shù)，繼續(xù)忽略。延遲計(jì)時(shí)器處理函數(shù)運(yùn)行完畢，檢查微任務(wù)隊(duì)列和更新UI，進(jìn)入下一個(gè)事件循環(huán)。現(xiàn)在開(kāi)始執(zhí)行間隔計(jì)時(shí)器處理函數(shù)，運(yùn)行8ms，在這期間間隔計(jì)時(shí)器第四次到期，這時(shí)候任務(wù)隊(duì)列里沒(méi)有處理函數(shù)，所以將這次的處理函數(shù)放入任務(wù)隊(duì)列，間隔定時(shí)器處理函數(shù)運(yùn)行完成，檢查微任務(wù)隊(duì)列和更新UI，進(jìn)入下一個(gè)事件循環(huán)，然后重復(fù)運(yùn)行間隔定時(shí)器……

通過(guò)以上的執(zhí)行過(guò)程我們發(fā)現(xiàn)，我們只能控制計(jì)時(shí)器何時(shí)被加入隊(duì)列，而無(wú)法控制何時(shí)執(zhí)行。

最后，JavaScript的事件循環(huán)是這門(mén)語(yǔ)言非常重要的基礎(chǔ)，由于我水平有限以上只是簡(jiǎn)單總結(jié)了一下它的執(zhí)行過(guò)程。大家可以深入研究一下Nodejs的事件循環(huán)

總結(jié)

以上是生活随笔為你收集整理的JavaScript事件循环探索的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。