JS非同步之宏隊列與微隊列

1. 原理圖

 

 2. 說明

JS 中用來存儲待執行回調函數的隊列包含 2 個不同特定的列隊

  • 宏列隊：用來保存待執行的宏任務（回調），比如：定時器回調、DOM 事件回調、ajax 回調

  • 微列隊：用來保存待執行的微任務（回調），比如：promise的回調、MutationObserver 的回調

JS 執行時會區別這 2 個隊列

  • JS 引擎首先必須先執行所有的初始化同步任務程式碼

  • 每次準備取出第一個宏任務執行前, 都要將所有的微任務一個一個取出來執行，也就是優先順序比宏任務高，且與微任務所處的程式碼位置無關

下面這個例子可以看出 Promise 要先於 setTimeout 執行：

　　setTimeout(() => { //立即放入宏隊列
      console.log('timeout callback1（）')
      Promise.resolve(3).then(
        value => { //立即放入微隊列
          console.log('Promise onResolved3()', value)
        }
      )
    }, 0)

    setTimeout(() => { //立即放入宏隊列
      console.log('timeout callback2（）')
    }, 0)

    Promise.resolve(1).then(
      value => { //立即放入微隊列
        console.log('Promise onResolved1()', value)
        setTimeout(() => {
          console.log('timeout callback3（）', value)
        }, 0)
      }
    )

    Promise.resolve(2).then(
      value => { //立即放入微隊列
        console.log('Promise onResolved2()', value)
      }
    )

    // Promise onResolved1() 1
    // Promise onResolved2() 2
    // timeout callback1（）
    // Promise onResolved3() 3
    // timeout callback2（）
    // timeout callback3（） 1
Tags:

VirMach 便宜 VPS