js里的事件循環機制十分有趣。從很多面試題也可以看出來，考察簡單的setTimeout也就是考察這個機制的。

在之前，我只是簡單地認為由于函數執行很快，setTimeout執行時間即便為0也不會馬上輸出，而是等待函數執行完后再輸出。這只對了一半。

實際上其運行機制就是js中的事件循環機制，在這個循環機制中呢，又與call Stack和task queue有關。

[[190124]]

一、js事件循環機制

事件循環機制呢，簡單點來說，就是在執行上下文的過程中，對函數的入棧和出棧。執行前函數先入棧，執行完后函數出棧。如若遇到了一些異步操作像回調函數以及ajax、setTimeout等，會先將他們交給瀏覽器的其他模塊去執行，執行完后，會把回調函數放入到taskqueue中。當所有的call stack執行完后再開始執行task queue中的函數。

舉一個簡單的例子：

console.log(1);  
setTimeout(function() 

我們來看一下執行的內部過程

1. 執行***句，放入call stack中，輸出 1

2. ***句出棧，執行第二句，由于是異步執行，交給其他模塊。

3. 執行完后，將回調函數放入taskqueue中

4. 執行下一句，同***步一樣，將語句入棧并執行，輸出3

5. 語句出棧，此時call stack空了。開始執行task queue任務，輸出2

所以，輸出結果是

與預想一致。

二、進階

如果添加了Promise又如何工作呢?

我們知道，Promise的回調函數不是傳入的，而是使用then來調用的。因此，Promise中定義的函數應該是馬上執行的，then才是其回調函數，放入queue隊列中。

還提到了一個重要的概念：

• macro-task包括：script(整體代碼), setTimeout, setInterval, setImmediate, I/O, UI rendering。
• micro-task包括：process.nextTick, Promises, Object.observe, MutationObserver

執行順序：函數調用棧清空只剩全局執行上下文，然后開始執行所有的micro-task。當所有可執行的micro-task執行完畢之后。循環再次執行macro-task中的一個任務隊列，執行完之后再執行所有的micro-task，就這樣一直循環。

(function test() {  
    setTimeout(function() {console.log(4)}, 0);  
    new Promise(function executor(resolve) {  
        console.log(1);  
        for( var i=0 ; i<10000 ; i++ ) {  
            i == 9999 && resolve();  
        }  
        console.log(2);  
    }).then(function() {  
        console.log(5);  
    });  
    console.log(3);})() 

執行過程：

1. 遇到setTimeout，交給其他模塊執行，執行完后回調放入macro-task中

2. 遇到Promise，立即執行里面的function，輸出1。

3. 循環開始，遇到resolve()，修改Promise狀態為fulfill。繼續執行，輸出2。

4. 遇到then，將回調放入micro-task中。

5. 繼續執行，輸出3。

6. call stack執行完畢了。開始執行micro-task中的回調函數，輸出5。

7. micro-task執行完畢，開始執行macro-task中的回調函數，輸出4。

8. 結束。

【本文為51CTO專欄作者“謝軍”的原創稿件，轉載可通過作者微信公眾號(jingfeng18)獲取聯系】

戳這里，看該作者更多好文