微任務什麼時候執行

什麼時候進入檢查點,清空微任務,當前調用棧清空的時候

例子1

<body>
  <button id="btn">
    點擊
  </button>

  <script>
    let btn = document.getElementById('btn')
    btn.addEventListener('click', () => {
      Promise.resolve().then(() => {
        console.log('M1')
      })
      console.log('L1')
    })
    btn.addEventListener('click', () => {
      Promise.resolve().then(() => {
        console.log('M2')
      })
      console.log('L2')
    })
  </script>
</body>

結果:L1 M1 L2 M2
第一個點擊事件執行就清空了,然後執行二個事件,所以可以認爲執行一個點擊事件執行棧就清空了,然後執行微任務,然後執行下一個點擊事件,然後執行微任務

例子2

<body>
  <button id="btn">
    點擊
  </button>

  <script>
    let btn = document.getElementById('btn')
    btn.addEventListener('click', () => {
      Promise.resolve().then(() => {
        console.log('M1')
      })
      console.log('L1')
    })
    btn.addEventListener('click', () => {
      Promise.resolve().then(() => {
        console.log('M2')
      })
      console.log('L2')
    })
    btn.click() // 注意這行代碼
  </script>
</body>

結果:L1 L2 M1 M2
執行了第一個點擊事件沒有清空執行棧,要繼續執行第二個點擊事件,當二個點擊事件執行完,btn.click()在棧中才算執行完,最後執行微任務。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章