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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/156516.html
標籤：JavaScript