這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)JavaScript中的事件循環(huán)機(jī)制是什么，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

專注于為中小企業(yè)提供做網(wǎng)站、網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)臨城免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

眾所周知，JavaScript 是一門單線程語(yǔ)言，雖然在 html5 中提出了 Web-Worker ，但這并未改變 JavaScript 是單線程這一核心。可看HTML規(guī)范中的這段話：

To coordinate events, user interaction, scripts, rendering, networking, and so forth, user agents must use event loops as described in this section. There are two kinds of event loops: those for browsing contexts, and those for workers.

為了協(xié)調(diào)事件、用戶交互、腳本、UI 渲染和網(wǎng)絡(luò)處理等行為，用戶引擎必須使用 event loops。Event Loop 包含兩類：一類是基于 Browsing Context ，一種是基于 Worker ，二者是獨(dú)立運(yùn)行的。 下面本文用一個(gè)例子，著重講解下基于 Browsing Context 的事件循環(huán)機(jī)制。

來(lái)看下面這段 JavaScript 代碼：

console.log('script start');

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

Promise.resolve().then(function() {
 console.log('promise1');
}).then(function() {
 console.log('promise2');
});

console.log('script end');

先猜測(cè)一下這段代碼的輸出順序是什么，再去瀏覽器控制臺(tái)輸入一下，看看實(shí)際輸出的順序和你猜測(cè)出的順序是否一致，如果一致，那就說(shuō)明，你對(duì) JavaScript 的事件循環(huán)機(jī)制還是有一定了解的，繼續(xù)往下看可以鞏固下你的知識(shí)；而如果實(shí)際輸出的順序和你的猜測(cè)不一致，那么本文下面的部分會(huì)為你答疑解惑。

任務(wù)隊(duì)列

所有的任務(wù)可以分為同步任務(wù)和異步任務(wù)，同步任務(wù)，顧名思義，就是立即執(zhí)行的任務(wù)，同步任務(wù)一般會(huì)直接進(jìn)入到主線程中執(zhí)行；而異步任務(wù)，就是異步執(zhí)行的任務(wù)，比如ajax網(wǎng)絡(luò)請(qǐng)求，setTimeout 定時(shí)函數(shù)等都屬于異步任務(wù)，異步任務(wù)會(huì)通過(guò)任務(wù)隊(duì)列( Event Queue )的機(jī)制來(lái)進(jìn)行協(xié)調(diào)。具體的可以用下面的圖來(lái)大致說(shuō)明一下：

同步和異步任務(wù)分別進(jìn)入不同的執(zhí)行環(huán)境，同步的進(jìn)入主線程，即主執(zhí)行棧，異步的進(jìn)入 Event Queue 。主線程內(nèi)的任務(wù)執(zhí)行完畢為空，會(huì)去 Event Queue 讀取對(duì)應(yīng)的任務(wù)，推入主線程執(zhí)行。 上述過(guò)程的不斷重復(fù)就是我們說(shuō)的 Event Loop (事件循環(huán))。

在事件循環(huán)中，每進(jìn)行一次循環(huán)操作稱為tick，通過(guò)閱讀規(guī)范可知，每一次 tick 的任務(wù)處理模型是比較復(fù)雜的，其關(guān)鍵的步驟可以總結(jié)如下：

• 在此次 tick 中選擇最先進(jìn)入隊(duì)列的任務(wù)( oldest task )，如果有則執(zhí)行(一次)

• 檢查是否存在 Microtasks ，如果存在則不停地執(zhí)行，直至清空Microtask Queue

• 更新 render

主線程重復(fù)執(zhí)行上述步驟

可以用一張圖來(lái)說(shuō)明下流程：

這里相信有人會(huì)想問(wèn)，什么是 microtasks ?規(guī)范中規(guī)定，task分為兩大類, 分別是 Macro Task （宏任務(wù)）和 Micro Task（微任務(wù)）, 并且每個(gè)宏任務(wù)結(jié)束后, 都要清空所有的微任務(wù),這里的 Macro Task也是我們常說(shuō)的 task ，有些文章并沒(méi)有對(duì)其做區(qū)分，后面文章中所提及的task皆看做宏任務(wù)( macro task)。

(macro)task 主要包含：script( 整體代碼)、setTimeout、setInterval、I/O、UI 交互事件、setImmediate(Node.js 環(huán)境)

microtask主要包含：Promise、MutaionObserver、process.nextTick(Node.js 環(huán)境)

setTimeout/Promise 等API便是任務(wù)源，而進(jìn)入任務(wù)隊(duì)列的是由他們指定的具體執(zhí)行任務(wù)。來(lái)自不同任務(wù)源的任務(wù)會(huì)進(jìn)入到不同的任務(wù)隊(duì)列。其中 setTimeout 與 setInterval 是同源的。

分析示例代碼

千言萬(wàn)語(yǔ)，不如就著例子講來(lái)的清楚。下面我們可以按照規(guī)范，一步步執(zhí)行解析下上面的例子，先貼一下例子代碼（免得你往上翻）。

console.log('script start');

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

Promise.resolve().then(function() {
 console.log('promise1');
}).then(function() {
 console.log('promise2');
});

console.log('script end');

整體 script 作為第一個(gè)宏任務(wù)進(jìn)入主線程，遇到 console.log，輸出 script start

• 遇到 setTimeout，其回調(diào)函數(shù)被分發(fā)到宏任務(wù) Event Queue 中

• 遇到 Promise，其 then函數(shù)被分到到微任務(wù) Event Queue 中,記為 then1，之后又遇到了 then 函數(shù)，將其分到微任務(wù) Event Queue 中，記為 then2

• 遇到 console.log，輸出 script end

至此，Event Queue 中存在三個(gè)任務(wù)，如下表：

宏任務(wù)	微任務(wù)
setTimeout	then1
-	then2

• 執(zhí)行微任務(wù)，首先執(zhí)行then1，輸出 promise1, 然后執(zhí)行 then2，輸出 promise2，這樣就清空了所有微任務(wù)

• 執(zhí)行 setTimeout 任務(wù)，輸出 setTimeout 至此，輸出的順序是：script start, script end, promise1, promise2, setTimeout

so，你猜對(duì)了嗎？

看看你掌握了沒(méi)

再來(lái)一個(gè)題目，來(lái)做個(gè)練習(xí)：

console.log('script start');

setTimeout(function() {
 console.log('timeout1');
}, 10);

new Promise(resolve => {
 console.log('promise1');
 resolve();
 setTimeout(() => console.log('timeout2'), 10);
}).then(function() {
 console.log('then1')
})

console.log('script end');

這個(gè)題目就稍微有點(diǎn)復(fù)雜了，我們?cè)俜治鱿拢?/p>

首先，事件循環(huán)從宏任務(wù) (macrotask) 隊(duì)列開始，最初始，宏任務(wù)隊(duì)列中，只有一個(gè) scrip t(整體代碼)任務(wù)；當(dāng)遇到任務(wù)源 (task source) 時(shí)，則會(huì)先分發(fā)任務(wù)到對(duì)應(yīng)的任務(wù)隊(duì)列中去。所以，就和上面例子類似，首先遇到了console.log，輸出 script start； 接著往下走，遇到 setTimeout 任務(wù)源，將其分發(fā)到任務(wù)隊(duì)列中去，記為 timeout1； 接著遇到 promise，new promise 中的代碼立即執(zhí)行，輸出 promise1, 然后執(zhí)行 resolve ,遇到 setTimeout ,將其分發(fā)到任務(wù)隊(duì)列中去，記為 timemout2, 將其 then 分發(fā)到微任務(wù)隊(duì)列中去，記為 then1； 接著遇到 console.log 代碼，直接輸出 script end 接著檢查微任務(wù)隊(duì)列，發(fā)現(xiàn)有個(gè) then1 微任務(wù)，執(zhí)行，輸出then1 再檢查微任務(wù)隊(duì)列，發(fā)現(xiàn)已經(jīng)清空，則開始檢查宏任務(wù)隊(duì)列，執(zhí)行 timeout1,輸出 timeout1； 接著執(zhí)行 timeout2，輸出 timeout2 至此，所有的都隊(duì)列都已清空，執(zhí)行完畢。其輸出的順序依次是：script start, promise1, script end, then1, timeout1, timeout2

用流程圖看更清晰：

上述就是小編為大家分享的JavaScript中的事件循環(huán)機(jī)制是什么了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

新聞標(biāo)題：JavaScript中的事件循環(huán)機(jī)制是什么-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)鏈接：http://aaarwkj.com/article20/dgodco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、營(yíng)銷型網(wǎng)站建設(shè)、域名注冊(cè)、虛擬主機(jī)、外貿(mào)建站、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)