JavaScript-EventLoop-事件循環

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

posted @ 2020-01-11 15:34  努力敲代碼的小甜心  閱讀(...)  評論(...編輯  收藏
ag二分彩