每次回调后，微任务运行的意义是什么？

Question

我在微筹码上阅读this article并得出以下结论：

  

总结：

     

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

据我所知，每个任务代表一个虚拟机转向，所以只要在每个任务结束时没有其他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之前和浏览器完成当前任务中的所有回调之前处理。

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