2020-01-11
EventLoop-事件循環
一、學習事件循環之前，先學習幾個英語詞組
EventLoop 事件循環
Event Queue 事件隊列
Event Table 事件表
macro-task 宏任務
micro-task 微任務
二、再來一道事件機制的題
console.log(1); setTimeout(() => { console.log(2); Promise.resolve().then(() => { console.log(3) }); }); new Promise((resolve, reject) => { console.log(4) resolve(5) }).then((data) => { console.log(data); Promise.resolve().then(() => { console.log(6) }).then(() => { console.log(7) setTimeout(() => { console.log(8) }, 0); }); }) setTimeout(() => { console.log(9); }) console.log(10);
// 正確結果：1、4、10、5、6、7、2、3、9、8
哈哈哈，看到上邊的題是不是被嚇到了，小甜的老師當時發給我的時候，我也驚呆了，同步異步真的太難為我了。
當時把自己寫的結果給老師發過去，然后又運行了一下，發現自己從第三個就開始錯了。ok，下面就從事件循環機制開始學習，將這個題弄懂吧。
三、js事件循環、同步異步
首先，js任務執行的是單線程的，干啥都得按順序來，后邊的任務得等排隊等着。但是任務分為同步和異步。
當一個任務塊代碼執行時，
- 遇到同步任務，就會進入主線程，
- 遇到異步任務會進入Event Table中注冊函數，之后將函數移入到 Event Queue。
- 主線程內任務執行完畢，會去Event Queue 讀取異步函數，按照順序執行異步函數。
待這個代碼塊的同步任務執行完，Event Table會將的異步任務，也是按照順序執行的。
圖源來自https://juejin.im/post/59e85eebf265da430d571f89 大佬的
不過還是有問題的，Event Queue 里，需要先執行微任務
四、js事件循環、宏任務微任務
js事件還可以分為宏任務微任務
- macro-task(宏任務)：包括整體代碼script，setTimeout，setInterval
- micro-task(微任務)：Promise，process.nextTick
當一個宏任務進入主線程
- 判斷這個任務是同步異步，同步執行
- 異步宏任務，放在 Event Queue ， 異步微任務，放在 Event Queue
- 當主線程任務執行完畢，去Event Queue
- 進入Event Queue，判斷是微任務還是宏任務，先執行微任務，再執行宏任務
圖源來自大佬 https://juejin.im/post/59e85eebf265da430d571f89
五、ook，學習完事件循環，接下來咱們來解決開頭的問題吧。
// macro1,同步執行，打印1
console.log(1); // macro2，異步宏任務放到 Event Queue ，我們標記為callback1（macro）
setTimeout(() => { // 同步任務
console.log(2); // 異步微任務，我們標記為callback4（micro）
Promise.resolve().then(() => { console.log(3) }); }); // macro3 同步宏任務
new Promise((resolve, reject) => { // 同步執行，打印4
console.log(4) resolve(5) // micro1，異步微任務放到 Event Queue，我們標記為callback2（micro）
}).then((data) => { // 同步，打印5
console.log(data); // 異步微任務，放到 Event Queue，我們標記為callback5（micro）
Promise.resolve().then(() => { console.log(6) // 異步微任務，放到 Event Queue，我們標記為callback6（micro）
}).then(() => { console.log(7) // 異步宏任務，放到 Event Queue,我們標記為callback7（macro）
setTimeout(() => { console.log(8) }, 0); }); }) // macro4，異步宏任務放到 Event Queue ，我們標記為callback3（macro）
setTimeout(() => { console.log(9); }) // macro5，同步任務打印10
console.log(10); // 分析： // *** 進入主線程，主線程的宏任務塊有5個，先執行同步任務
// 1. 【執行同步任務】 // (1).打印1，4，10
// 2. Event Queue 的函數有 ：callback1（macro）、callback2（micro）、callback3（macro）
// 3. 【先執行微任務 callback2（micro）】 // (1).執行同步任務，打印 5 ，打印console.log(data)，結果是5，data是 resolve的結果 // (2).callback5（micro） // (3).callback6（micro） // (4).callback7（macro）
// *** 此時已經打印出：1，4，10，5 // *** Event Queue 的函數依次是：callback1（macro）、callback3（macro）、callback5（micro）、callback6（micro）、callback7（macro） // *** 微任務有兩個，依次執行微任務
// 4.【微任務】 // （1).callback5（micro）打印6 // （2).callback6（micro）打印7
// *** 此時已經打印出：1，4，10，5，6，7 // *** Event Queue 的函數依次是：callback1（macro）、callback3（macro）、callback7（macro） // *** 接下來依次執行
// 5. 【宏任務callback1（macro）】 // (1).執行同步，打印2 // (2).callback4（micro）
// *** 此時已經打印出：1，4，10，5，6，7，2 // *** Event Queue 的函數依次是：callback3（macro）、callback7（macro）、callback4（micro） // *** 接下來先執行微任務
// 6. 【微任務callback4（micro）】 // (1).打印3
// *** 此時已經打印出：1，4，10，5，6，7，2，3 // *** Event Queue 的函數依次是：callback3（macro）、callback7（macro） // *** 宏任務剩下兩個，接下來依次執行
// 7. 【宏任務callback3（macro）、callback7（macro）】 // (1).打印9 // (1).打印8
// *** 此時已經打印出：1，4，10，5，6，7，2，3，9，8 // *** 任務執行完畢，所有數字均已打印出來
ok ，本次學習到這里就結束啦！下面再來一道練習題吧！
console.log('1'); setTimeout(function() { console.log('2'); process.nextTick(function() { console.log('3'); }) new Promise(function(resolve) { console.log('4'); resolve(); }).then(function() { console.log('5') }) }) process.nextTick(function() { console.log('6'); }) new Promise(function(resolve) { console.log('7'); resolve(); }).then(function() { console.log('8') }) setTimeout(function() { console.log('9'); process.nextTick(function() { console.log('10'); }) new Promise(function(resolve) { console.log('11'); resolve(); }).then(function() { console.log('12') }) })
如果沒學會，可以去看看大佬的講解 https://juejin.im/post/59e85eebf265da430d571f89