之前有看過一些事件循環的博客，不過一陣子沒看就發現自己忘光了，所以決定來自己寫一個博客總結下！

首先，我們來解釋下事件循環是個什么東西:

就我們所知，瀏覽器的js是單線程的，也就是說，在同一時刻，最多也只有一個代碼段在執行，可是瀏覽器又能很好的處理異步請求，那么到底是為什么呢？我們先來看一張圖(這張圖來自于http://www.zcfy.cc/article/node-js-at-scale-understanding-the-node-js-event-loop-risingstack-1652.html)

從上圖我們可以看出，js主線程它是有一個執行棧的，所有的js代碼都會在執行棧里運行。在執行代碼過程中，如果遇到一些異步代碼(比如setTimeout,ajax,promise.then以及用戶點擊等操作),那么瀏覽器就會將這些代碼放到一個線程(在這里我們叫做幕后線程)中去等待，不阻塞主線程的執行，主線程繼續執行棧中剩余的代碼，當幕后線程（background thread）里的代碼準備好了(比如setTimeout時間到了，ajax請求得到響應),該線程就會將它的回調函數放到任務隊列中等待執行。而當主線程執行完棧中的所有代碼后，它就會檢查任務隊列是否有任務要執行，如果有任務要執行的話，那么就將該任務放到執行棧中執行。如果當前任務隊列為空的話，它就會一直循環等待任務到來。因此，這叫做事件循環。

那么，問題來了。如果任務隊列中，有很多個任務的話，那么要先執行哪一個任務呢？

其實(正如上圖所示)，js是有兩個任務隊列的，一個叫做Macrotask Queue(Task Queue),一個叫做Microtask Queue

• 前者主要是進行一些比較大型的工作，常見的有setTimeout,setInterval,用戶交互操作，UI渲染等
• 后者主要是進行一些比較小型的工作，常見的有Promise,process.nextTick(nodejs)

那么，兩者有什么具體的區別呢?或者說，如果兩種任務同時出現的話，應該選擇哪一個呢?
其實事件循環做的事情如下:

檢查Macrotask 隊列是否為空,若不為空，則進行下一步，若為空，則跳到3

從Macrotask隊列中取隊首(在隊列時間最長)的任務進去執行棧中執行(僅僅一個)，執行完后進入下一步

檢查Microtask隊列是否為空，若不為空，則進入下一步，否則，跳到1（開始新的事件循環）

從Microtask隊列中取隊首(在隊列時間最長)的任務進去事件隊列執行,執行完后，跳到3

其中，在執行代碼過程中新增的microtask任務會在當前事件循環周期內執行，而新增的macrotask任務只能等到下一個事件循環才能執行了(一個事件循環只執行一個macrotask)
首先，我們先來看一段代碼

console.log(1) setTimeout(function() {//settimeout1console.log(2) }, 0); const intervalId = setInterval(function() {//setinterval1console.log(3) }, 0) setTimeout(function() {//settimeout2console.log(10)new Promise(function(resolve) {//promise1console.log(11)resolve()}).then(function() {console.log(12)}).then(function() {console.log(13)clearInterval(intervalId)}) }, 0);//promise2 Promise.resolve().then(function() {console.log(7)}).then(function() {console.log(8)}) console.log(9)

你覺得結果應該是什么呢?
我在node環境和chrome控制臺輸出的結果如下:

1 9 7 8 2 3 10 11 12 13

在上面的例子中
第一次事件循環:

console.log(1)被執行，輸出1

settimeout1執行，加入macrotask隊列

setinterval1執行，加入macrotask隊列

settimeout2執行，加入macrotask隊列

promise2執行，它的兩個then函數加入microtask隊列

console.log(9)執行，輸出9

根據事件循環的定義，接下來會執行新增的microtask任務，按照進入隊列的順序，執行console.log(7)和console.log(8),輸出7和8
microtask隊列為空，回到第一步，進入下一個事件循環，此時macrotask隊列為: settimeout1,setinterval1,settimeout2

第二次事件循環:

從macrotask隊列里取位于隊首的任務(settimeout1)并執行，輸出2
microtask隊列為空，回到第一步，進入下一個事件循環，此時macrotask隊列為: setinterval1,settimeout2

第三次事件循環:

從macrotask隊列里取位于隊首的任務(setinterval1)并執行，輸出3,然后又將新生成的setinterval1加入macrotask隊列
microtask隊列為空，回到第一步，進入下一個事件循環，此時macrotask隊列為: settimeout2,setinterval1

第四次事件循環:

從macrotask隊列里取位于隊首的任務(settimeout2)并執行,輸出10，并且執行new Promise內的函數(new Promise內的函數是同步操作，并不是異步操作),輸出11，并且將它的兩個then函數加入microtask隊列

從microtask隊列中，取隊首的任務執行，直到為空為止。因此，兩個新增的microtask任務按順序執行，輸出12和13，并且將setinterval1清空
此時，microtask隊列和macrotask隊列都為空，瀏覽器會一直檢查隊列是否為空，等待新的任務加入隊列。

在這里，大家可以會想，在第一次循環中，為什么不是macrotask先執行？因為按照流程的話，不應該是先檢查macrotask隊列是否為空，再檢查microtask隊列嗎？
原因：因為一開始js主線程中跑的任務就是macrotask任務，而根據事件循環的流程，一次事件循環只會執行一個macrotask任務，因此，執行完主線程的代碼后，它就去從microtask隊列里取隊首任務來執行。

注意：

由于在執行microtask任務的時候，只有當microtask隊列為空的時候，它才會進入下一個事件循環，因此，如果它源源不斷地產生新的microtask任務，就會導致主線程一直在執行microtask任務，而沒有辦法執行macrotask任務，這樣我們就無法進行UI渲染/IO操作/ajax請求了，因此，我們應該避免這種情況發生。在nodejs里的process.nexttick里，就可以設置最大的調用次數，以此來防止阻塞主線程。

以此，我們來引入一個新的問題，定時器的問題。定時器是否是真實可靠的呢？比如我執行一個命令:setTimeout(task, 100),他是否就能準確的在100毫秒后執行呢？其實根據以上的討論，我們就可以得知，這是不可能的。
原因我想大家應該也都知道了，因為你執行setTimeout(task,100)后，其實只是確保這個任務，會在100毫秒后進入macrotask隊列，但并不意味著他能立刻運行，可能當前主線程正在進行一個耗時的操作，也可能目前microtask隊列有很多個任務，所以這也可能是大家一直詬病setTimeout的原因吧哈哈哈哈

以上，只是我個人對事件循環的一些看法， 以及借鑒了其他優秀文章

參考:
http://www.zcfy.cc/article/node-js-at-scale-understanding-the-node-js-event-loop-risingstack-1652.html
https://github.com/ccforward/cc/issues/47

轉載于:https://www.cnblogs.com/chenjg/p/7000044.html

總結

以上是生活随笔為你收集整理的js事件循环的全部內容，希望文章能夠幫你解決所遇到的問題。

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