1. 程式人生 > >事件迴圈(Event Loop)

事件迴圈(Event Loop)

1.什麼是事件迴圈?

JavaScript為單執行緒執行的,所以是從上到下依次執行,js分為兩個任務,巨集任務和微任務

首先執行巨集任務(第一次就是執行所有的同步程式碼),再執行所有的微任務,執行完畢之後再次執行

巨集任務,執行完畢再次執行所有的微任務,也就是:

巨集任務 --> 微任務  -->  巨集任務 -->  微任務

2.什麼是巨集任務,微任務?

巨集任務:

script(全域性任務), setTimeout, setInterval, setImmediate, I/O, UI rendering. 微任務: process.nextTick, Promise.then, Object.observer, MutationObserver.

3.案例深入解讀

 setTimeout(function(){
    console.log(1)
 },0)

 new Promise((resolve,reject)=>{
     console.log(2)
     resolve(3)
     setTimeout(function(){
        console.log(5)
        promise.resolve
     },0)
 }).then((val)=>{
     console.log(val)
}) console.log(4)

解讀:

    首先執行巨集任務(同步程式碼)  :console.log(2)  console.log(4)

    再執行所有的微任務  console.log(3)

    再一次從上到下執行所有的微任務:console.log(1)   console.log(5)

    所以正確答案是  2 4  3 1 5

 

我們再加大難度

console.log('start')
setTimeout(() => {
  console.log('setTimeout 1')
  Promise.resolve().then(() => {
    console.log('promise 3')
  }).then(() => {
    console.log('promise 4')
  }).then(() => {
    setTimeout(() => {
      console.log('setTimeout 2')
      Promise.resolve().then(() => {
        console.log('promise 5')
      }).then(() => {
        console.log('promise 6')
      })
    }, 0)
  })
}, 0)
Promise.resolve().then(() => {
  console.log('promise 1')
}).then(() => {
  console.log('promise 2')
})

解讀:

    我們先執行同步程式碼: start

    微任務:promise 1 ,  promise 2

    巨集任務: setTimeout 1

   微任務:promise 3, promise 4

   巨集任務:setTimeout 2 , 

  微任務:promise 5,promise 6

正確答案

start promise 1 promise 2 setTimeout 1 promise 3 promise 4 setTimeout 2 promise 5 promise 6