javascript事件循環分為2種：一種是瀏覽器端事件循環，一種是node端事件循環。 此文只是捋一捋我對瀏覽器端事件循環的理解。

前言

我們都知道 JavaScript 是一門單線程語言，這意味著同一時間只能執行一個任務，結束了才能去執行下一個。如果前面的任務沒有執行完，后面的任務就會一直等待。試想，有一個耗時很長的網絡請求，如果所有任務都需要等待這個請求完成才能繼續，顯然是不合理的并且我們在瀏覽器中也沒有體驗過這種情況（除非你要同步請求 Ajax），究其原因，是 JavaScript 借助異步機制來實現了任務的調度。

JavaScript 常見的異步有3種：ajax、dom事件（button的點擊事件等）、定時器（setTimeout等）。

舉個例子

console.log("A");setTimeout(() => {console.log("B"); }, 100);console.log("C"); 復制代碼

稍微了解一點瀏覽器中異步機制的同學都能答出會輸出 “A C B”，我們來通過分析 event loop 來對瀏覽器中的異步進行梳理，并搞清上面的問題。

從上圖我們可以看出js分為3個部分：stack(主線程)、WebAPIs、event loop。

瀏覽器的執行順序是：

1.先執行主線程，即

console.log("A");setTimeout(() => {console.log("B"); }, 100);console.log("C"); 復制代碼

程序從上往下執行，但是執行到setTimeout時，只是注冊了一個WebAPIs事件，并不會執行setTimeout的回調函數。 此回調函數是異步的，會在主線程的所有程序執行完畢后根據注冊的時間才執行。

2.當主程序執行完畢后，就執行event loop。當然callback queue一開始是空的。event loop是一個‘死循環’，它會一遍又一遍的去檢測WebAPIs有沒有可執行的回調函數，有就把回調函數放入自身的callback queue并執行，沒有的話繼續下一次循環。

3.瀏覽器監聽WebAPIs事件。過了100ms定時器事件觸發了，它會通知event loop有可執行的回調函數了。

事件循環的一個必須條件是 執行棧中的任務執行完畢才會執行 “任務隊列”中的任務，如果執行棧一直處于執行不完的情況，也就沒有任務隊列什么事了。所以我們的settimeout 后面的參數其實是不準確的，他開始算的時間應該是執行棧的任務執行完畢。

settimeout還有一個最小時間4ms的規定，所以當我們寫settimeout(function(){},0)時，其中的0其實是4ms。

微任務和宏任務

首先說明，是以__瀏覽器為處理環境__下的執行邏輯 瀏覽器環境下的微任務和宏任務有哪些 宏任務：setTimeout setImmediate MessageChannel 微任務：Promise.then MutationObserver 記住兩點：

• 微任務在宏任務之前的執行，先執行 執行棧中的內容 執行后 清空微任務
• 每次取一個宏任務 就去清空微任務，之后再去取宏任務

題目

setTimeout(function(){console.log('setTimeout1');Promise.resolve().then(()=>{console.log('then1');}); },0) Promise.resolve().then(()=>{console.log('then2');Promise.resolve().then(()=>{console.log('then3');})setTimeout(function(){console.log('setTimeout2');},0) }) 復制代碼

• 微任務宏任務同時出現，先將微任務放入執行隊列，棧為空則先執行then2。setTimeout1放入宏任務執行隊列中
• then2之后執行后，接下來存在微任務then3。將then3放入微任務隊列中。
• 接下來setTimeout2加入到宏任務隊列中。
• 此時執行棧為空，執行then3。
• 微任務全部執行完畢后，執行宏任務setTimeout1，執行發現微任務then1,放置到微任務隊列中。
• setTimeout1宏任務執行完，再次清空微任務隊列，執行then1
• 微任務全部執行完畢后，執行宏任務setTimeout2。程序結束。

總結

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

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