先來段代碼

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); 復制代碼

讓我們來看看打印結果的順序

1 2 5 4 3 復制代碼

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

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

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

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

這就是所謂的事件環機制，瀏覽器和node中的事件環機制有所不同。

瀏覽器中的事件環

---

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

node中的事件環

---

圖中每一個階段都代表了一個宏任務隊列，在Node事件環中，優先執行微任務，微任務的運行時機是在每一個“宏任務隊列”清空之后，在進入下一個宏任務隊列之間執行。這是和瀏覽器的最大區別。

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

來看一段代碼：

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

執行結果為：

Promise immediate timeout 復制代碼

代碼并不復雜，首先使用fs模塊讀取了一個文件，在回調的內部有兩個宏任務和一個微任務，微任務總是優于宏任務執行的，因此先輸出Promise。 但是之后的區別為什么先輸出immdiate？原因就在于fs讀取文件的宏任務在上圖中的第4個輪詢階段，當第4個階段清空隊列之后，就該進入第5個check階段，也就是setImmediate這個宏任務所在的階段，而不會跳回第1個階段，因此先輸出immedate。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。