結合microtask和macrotask理解event-loop

這篇文章真的是好文。講的很清晰，看完以後更深一步的理解了事件循環機制。

http://www.jianshu.com/p/12b9...

簡短的概述下總結

setTimeout是一個宏任務源，寫在裏面的回調函數會加到宏任務隊列中。

Promise是一個微任務源，寫在裏面resolve以及reject回調會被加到微任務隊列中。

事件循環能夠分爲這樣的一個過程：分別是 宏任務->執行棧->微任務。

setTimeout(function() {
    console.log('timeout1');
})

new Promise(function(resolve) {
    console.log('promise1');
    for(var i = 0; i < 1000; i++) {
        i == 99 && resolve();
    }
    console.log('promise2');
}).then(function() {
    console.log('then1');
})

console.log('global1');

好比上面這樣的一段代碼，setTimeout是一個宏任務源，因此裏面的回調函數console.log('timeout1');會被加到宏任務隊列中。到了Promise，輸出promise1以及promise2，等到for循環結束後，執行resolve，因爲Promise是一個微任務源，因此console.log('then1');回調會被加到微任務隊列中。繼續執行代碼，輸出grobal1。這個時候，執行棧上的代碼已經執行完畢，因此此時咱們執行微任務隊列，此時的微任務隊列上有console.log('then1');，因此瀏覽器輸出then1。至此，一輪的事件循環已經執行完畢，開啓新的一輪事件循環。也是從宏任務->執行棧->微任務。因爲此時宏任務上有事件console.log('timeout1');，因此輸出timeout1。這就是整段代碼執行狀況的理解。依次輸出以下：

promise1
promise2
global1
then1
timeout1