經典前端面試題:promise和setTimeout執行順序是怎樣的？

要搞懂這個問題，首先要了解事件循環（Event Loop）

JS運行時，對代碼執行順序的一個算法（任務調度算法）

JS 分類：同步任務和異步任務 JS 的執行機制：

• 首先判斷JS代碼是同步仍是異步，同步就進入主線程，異步就進入 event table
• 異步任務在 event table 中註冊函數，當知足觸發條件後，被推入event queue
• 同步任務進入主線程後一直執行，直到主線程空閒時，纔回去 event queue 中查看是否有可執行的異步任務，若是有就推入主線程

event loop 裏有維護兩個不一樣的異步任務隊列

• macro Tasks（宏任務）：script（總體代碼）, setTimeout, setInterval, setImmediate, I/O, UI rendering
• micro Tasks（微任務）：process.nextTick, Promise（瀏覽器實現的原生Promise）, Object.observe, MutationObserver, MessageChannel

每次執行一段代碼（一個script標籤）都是一個 macroTask 執行流程：

• event loop 開始
• 從macro Tasks 隊列抽取一個任務，執行
• micro Tasks 清空隊列執行，如有任務不可執行，推入下一輪 micro Tasks
• 結束 event loop

瀏覽器執行代碼的過程以下整個流程

那麼回到題目上去，就是

setTimeout(function(){
    console.log(1);    // 1-放入宏任務隊列，7-執行下一輪事件循環，宏任務輸出1
},0); 

new Promise(function(resolve) { 
    console.log(2);    // 2-同步輸出 2
    for(let i=0; i<10000 ; i++ ) { 
        i==9999 && resolve(); 
    } 
    console.log(3);    // 4-同步輸出 3
}).then(function(){ 
    console.log(4);    // 3-放入微任務隊列，6-回到微任務隊列，執行剩餘的微任務，輸出4
}); 
console.log(5);    // 5-同步輸出 5
複製代碼

做者：FunnyZ

---

經典前端面試題每日更新，歡迎參與討論，地址：github.com/daily-inter…。

---

更多angular1/2/4/五、ionic1/2/三、react、vue、微信小程序、nodejs等技術文章、視頻教程和開源項目，請關注微信公衆號——全棧弄潮兒。