每次回调后运行微任务是什么意思

Question

我正在阅读这篇关于微任务的文章，得出以下结论：

总结：

• 任务按顺序执行，浏览器可以在它们之间呈现
• 微任务按顺序执行，并执行：
  • 每次回调后，
  • 只要每个结束时没有其他 JavaScript 在执行过程中 任务

据我了解，每个任务代表一个 VM 轮次，因此只要每个任务结束时没有其他 JavaScript 在执行过程中意味着调用堆栈为空。但是我不明白每次回调后是什么意思？

谁能解释一下并举个例子？

Answer 1

下面是演示这一点的清晰示例：

function cb1() {
    console.log('cb1');
    Promise.resolve('df').then(function promiseMicrotask() {
        console.log('promise');
    });
}
function cb2() {
    console.log('cb2');
}
const element = document.querySelector('div.inner');
element.addEventListener('click', cb1);
element.addEventListener('click', cb2);

在上面的示例中，当您单击 div.inner 时，浏览器会安排一个任务来处理事件并调用回调cb1和cb2。稍后它开始执行任务并触发cb1。在内部cb1已解决的承诺会安排一个微任务来运行promiseMicrotask回调。每当以 cb1 开头的当前堆栈为空时，浏览器都会检查 microtaks 队列并找到一个微任务promiseMicrotask。它会触发它，因此它会记录promise.然后它继续触发cb2。

因此，微任务promiseMicrotask是在回调cb1之后，但在cb2之前和浏览器完成执行当前任务中的所有回调之前处理的。

这里重要的是所有事件回调都在当前任务中执行。