1. 程式人生 > >JS的事件迴圈機制eventloop

JS的事件迴圈機制eventloop

一. Eventloop是什麼?

    javascript中事件任務分為巨集任務和微任務,執行順序是先執行巨集任務再執行微任務。

   任務分為同步和非同步, 同步放入主執行緒立即執行,非同步的進入event Table並註冊函式,之後放入到event Queue中,等待同步執行完後執行。巨集任務的主執行緒執行完之後, 執行微任務主執行緒的中的事件,這樣算是完成了一次事件迴圈。接下來檢視巨集任務的Event Queue中是否有未執行的任務,有的話,就開始第二輪事件迴圈。

  • 巨集任務:整體程式碼script,setTimeout, setInterval
  • 微任務:Promise.then(非new Promise)
console.log('1');
setTimeout(function() {
    console.log('2');
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
輸出:
1
2
4
5
  • 巨集任務同步程式碼console.log('1')
  • setTimeout,加入巨集任務Event Queue,沒有發現微任務,第一輪事件迴圈走完
  • 第二輪事件迴圈開始,先執行巨集任務,從巨集任務Event Queue中獨取出setTimeout的回撥函式
  • 同步程式碼console.log('2')
  • new Promise,同步執行console.log('4'),發現then,加入微任務Event Queue
  • 巨集任務執行完畢,接下來執行微任務執行Promise.then
  • 微任務執行完畢,第二輪事件迴圈走完,沒有發現巨集任務,事件迴圈結束