JavaScript-EventLoop-事件循環

2020-01-11

EventLoop-事件循環

1、學習事件循環以前，先學習幾個英語詞組

EventLoop 事件循環
Event Queue 事件隊列
Event Table 事件表
macro-task 宏任務
micro-task 微任務

2、再來一道事件機制的題

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);

 // 正確結果：一、四、十、五、六、七、二、三、九、8

        哈哈哈，看到上邊的題是否是被嚇到了，小甜的老師當時發給個人時候，我也驚呆了，同步異步真的太難爲我了。

      當時把本身寫的結果給老師發過去，而後又運行了一下，發現本身從第三個就開始錯了。ok，下面就從事件循環機制開始學習，將這個題弄懂吧。

3、js事件循環、同步異步

      首先，js任務執行的是單線程的，幹啥都得按順序來，後邊的任務得等排隊等着。可是任務分爲同步和異步。

      當一個任務塊代碼執行時，

• 遇到同步任務，就會進入主線程，
• 遇到異步任務會進入Event Table中註冊函數，以後將函數移入到 Event Queue。
• 主線程內任務執行完畢，會去Event Queue 讀取異步函數，按照順序執行異步函數。

      待這個代碼塊的同步任務執行完，Event Table會將的異步任務，也是按照順序執行的。

 

 

                      圖源來自http://www.javashuo.com/article/p-cmtsxzha-h.html 大佬的

        不過仍是有問題的，Event Queue 裏，須要先執行微任務

4、js事件循環、宏任務微任務

    js事件還能夠分爲宏任務微任務

• macro-task(宏任務)：包括總體代碼script，setTimeout，setInterval
• micro-task(微任務)：Promise，process.nextTick

    當一個宏任務進入主線程

• 判斷這個任務是同步異步，同步執行
• 異步宏任務，放在 Event Queue ， 異步微任務，放在 Event Queue
• 當主線程任務執行完畢，去Event Queue
• 進入Event Queue，判斷是微任務仍是宏任務，先執行微任務，再執行宏任務

 

       圖源來自大佬 http://www.javashuo.com/article/p-cmtsxzha-h.html

 

5、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') }) })

 

若是沒學會，能夠去看看大佬的講解 http://www.javashuo.com/article/p-cmtsxzha-h.html