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會将的異步任務，也是按照順序執行的。
不過還是有問題的，Event Queue 裡，需要先執行微任務
四、js事件循環、宏任務微任務
js事件還可以分為宏任務微任務
macro-task(宏任務)：包括整體代碼script，setTimeout，setInterval
micro-task(微任務)：Promise，process.nextTick
當一個宏任務進入主線程
判斷這個任務是同步異步，同步執行
異步宏任務，放在 Event Queue ， 異步微任務，放在 Event Queue
當主線程任務執行完畢，去Event Queue
進入Event Queue，判斷是微任務還是宏任務，先執行微任務，再執行宏任務
五、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')
})
})
關于找一找教程網
本站文章僅代表作者觀點，不代表本站立場，所有文章非營利性免費分享。
本站提供了軟體程式設計、網站開發技術、伺服器運維、人工智能等等IT技術文章，希望廣大程式員努力學習，讓我們用科技改變世界。
[JavaScript-EventLoop-事件循環]http://www.zyiz.net/tech/detail-98923.html