什麼時候進入檢查點,清空微任務,當前調用棧清空的時候
例子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()
在棧中才算執行完,最後執行微任務。