图解JavaScript事件循环：微任务和宏任务

现在div显示的是i值的增长，这是一种进度条。用例3：在事件处理程序中执行某些操作在事件处理程序中，我们可能会决定将某些行为推迟到事件冒泡并在所有级别上处理之后。我们可以通过将该代码包装在零延迟的setTimeout中来做到这一点。在创建自定义事件[1]一章中，我们看到了一个这样的例子：自定义事件menu-open是在setTimeout中调度的，所以它发生在处理完点击事件之后。menu.onclick=function(){//...//用点击菜单项的数据创建自定义事件letcustomEvent=newCustomEvent("menu-open",{bubbles:true});//异步派发（dispatch)自定义事件setTimeout(()=>menu.dispatchEvent(customEvent));};除了本章提到的宏任务（macrotask）外，microtask队列中还有macrotasks和microtasks[2]章提到的microtask。微任务仅来自我们的代码。它们通常由承诺创建：.then/catch/finally处理程序的执行成为微任务。微任务也用于等待的“幕后”，因为它是另一种形式的承诺处理。还有一个特殊的函数queueMicrotask(func)将func排入微任务队列中执行。在每个宏任务之后，引擎会在执行其他宏任务、渲染或其他任何任务之前立即执行微任务队列中的所有任务。例如，看看这个例子：setTimeout(()=>alert("timeout"));Promise.resolve().then(()=>alert("promise"));alert("code");这里的执行顺序是什么？首先显示代码，因为它是常规同步调用。promise排在第二位，因为then通过微任务队列并在当前代码之后执行。超时显示在最后，因为它是一个宏任务。更详细的事件循环图如下（顺序是从上到下，即：先是脚本，然后是微任务、渲染等）：微任务会执行任何其他的事件处理，或者渲染，或者任何之前完成的其他宏任务。这很重要，因为它确保微任务之间的应用程序环境本质上是相同的（没有鼠标坐标变化，没有新的网络数据等）。如果我们希望一个函数异步执行（在当前代码之后），但在呈现更改或处理新事件之前，那么我们可以使用queueMicrotask来调度它。下面是一个与上一个类似的带有“计数进度条”的示例，但它使用queueMicrotask而不是setTimeout。你可以看到它是在最后渲染的。就像写同步代码一样：