微任务在每次回调之后运行意味着什么？

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之前，在浏览器完成当前任务中的所有回调之前处理的。

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