先來段代碼

const p = new Promise((resolve, reject) => {console.log(1) }) console.log(2); setTimeout(function () {console.log(3); }, 1000); p.then((data) => {console.log(4) }) console.log(5); 復(fù)制代碼

讓我們來看看打印結(jié)果的順序

1 2 5 4 3 復(fù)制代碼

因為javascript是單線程的，只有一個主線程。主線程會先執(zhí)行同步代碼，異步操作會被放入一個任務(wù)隊列中。等到同步代碼執(zhí)行完成之后，再執(zhí)行異步任務(wù)。 常見的異步操作有：

• Ajax
• DOM的事件操作
• setTimeout
• Promise的then方法
• Node的讀取文件

異步任務(wù)又分為宏任務(wù)和微任務(wù)。 常見的宏任務(wù)有：setTimeout、setInterval、setImmediate、MessageChannel 常見的微任務(wù)有：Promise的then方法、process.nextTick、MutationObserver

總結(jié)javascript執(zhí)行順序如下： 1，若是同步任務(wù)，則 主線程中執(zhí)行；如果是異步任務(wù)，就放到一個任務(wù)隊列里 2，開始執(zhí)行主線程中的同步任務(wù)，直到將主線程中的所有任務(wù)都走完，此時同步任務(wù)清空了 3，回過頭看異步隊列里如果有異步任務(wù)完成了，就生成一個事件并注冊回調(diào)，放入主線程中 4，再返回第3步，直到異步隊列都清空，程序運行結(jié)束

這就是所謂的事件環(huán)機(jī)制，瀏覽器和node中的事件環(huán)機(jī)制有所不同。

瀏覽器中的事件環(huán)

---

在瀏覽器的執(zhí)行環(huán)境中，總是先執(zhí)行微任務(wù)，再執(zhí)行宏任務(wù)，再來看看第一段代碼，為什么Promise的then方法在setTimeout之前執(zhí)行？其根本原理就是因為Promise的then方法是一個微任務(wù)，而setTimeout是一個宏任務(wù)。 執(zhí)行順序為： 1，先執(zhí)行微任務(wù)，清空微任務(wù)隊列 2，再執(zhí)行宏任務(wù)，如宏任務(wù)中有微任務(wù)，則繼續(xù)執(zhí)行微任務(wù)，直至清空微任務(wù)隊列 3，循環(huán)上述操作，直至所有任務(wù)完成

node中的事件環(huán)

---

圖中每一個階段都代表了一個宏任務(wù)隊列，在Node事件環(huán)中，優(yōu)先執(zhí)行微任務(wù)，微任務(wù)的運行時機(jī)是在每一個“宏任務(wù)隊列”清空之后，在進(jìn)入下一個宏任務(wù)隊列之間執(zhí)行。這是和瀏覽器的最大區(qū)別。

與瀏覽器事件環(huán)有所不同的是：瀏覽器事件環(huán)是遇到微任務(wù)會清空整個微任務(wù)隊列。 Node事件環(huán)是清空完一個階段的宏任務(wù)隊列之后再清空微任務(wù)隊列。

來看一段代碼：

const fs = require('fs');fs.readFile('./1.txt', (err, data) => {setTimeout(() => {console.log('timeout');});setImmediate(() => {console.log('immediate');});Promise.resolve().then(() => {console.log('Promise');}); }); 復(fù)制代碼

執(zhí)行結(jié)果為：

Promise immediate timeout 復(fù)制代碼

代碼并不復(fù)雜，首先使用fs模塊讀取了一個文件，在回調(diào)的內(nèi)部有兩個宏任務(wù)和一個微任務(wù)，微任務(wù)總是優(yōu)于宏任務(wù)執(zhí)行的，因此先輸出Promise。 但是之后的區(qū)別為什么先輸出immdiate？原因就在于fs讀取文件的宏任務(wù)在上圖中的第4個輪詢階段，當(dāng)?shù)?個階段清空隊列之后，就該進(jìn)入第5個check階段，也就是setImmediate這個宏任務(wù)所在的階段，而不會跳回第1個階段，因此先輸出immedate。

總結(jié)

以上是生活随笔為你收集整理的event loop那些事儿的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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