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

现在 div 显示了 i 的值的增长，这就是进度条的一种。

用例 3：在事件之后做一些事情

在事件处理程序中，我们可能会决定推迟某些行为，直到事件冒泡并在所有级别上得到处理后。我们可以通过将该代码包装到零延迟的 setTimeout 中来做到这一点。

在 创建自定义事件[1] 一章中，我们看到过这样一个例子：自定义事件 menu-open 被在 setTimeout 中分派(dispatched)，所以它在 click 事件被处理完成之后发生。

 
 
 
 

  
  
  
  
menu.onclick = function() { 
  
  
  
  
  // ... 
  
  
  
  
 
  
  
  
  
  // 创建一个具有被点击的菜单项的数据的自定义事件 
  
  
  
  
  let customEvent = new CustomEvent("menu-open", { 
  
  
  
  
    bubbles: true 
  
  
  
  
  }); 
  
  
  
  
 
  
  
  
  
  // 异步分派（dispatch）自定义事件 
  
  
  
  
  setTimeout(() => menu.dispatchEvent(customEvent)); 
  
  
  
  
}; 
 
 
 
 

宏任务和微任务

除了本章中所讲的 宏任务(macrotask) 外，还有在 微任务队列[2] 一章中提到的 微任务(microtask)。

微任务仅来自于我们的代码。它们通常是由 promise 创建的：对 .then/catch/finally 处理程序的执行会成为微任务。微任务也被用于 await 的“幕后”，因为它是 promise 处理的另一种形式。

还有一个特殊的函数 queueMicrotask(func)，它对 func 进行排队，以在微任务队列中执行。

每个宏任务之后，引擎会立即执行微任务队列中的所有任务，然后再执行其他的宏任务，或渲染，或进行其他任何操作。

例如，看看下面这个示例：

 
 
 
 

  
  
  
  
setTimeout(() => alert("timeout")); 
  
  
  
  
 
  
  
  
  
Promise.resolve() 
  
  
  
  
  .then(() => alert("promise")); 
  
  
  
  
 
  
  
  
  
alert("code"); 
 
 
 
 

这里的执行顺序是怎样的?

1. code 首先显示，因为它是常规的同步调用。
2. promise 第二个出现，因为 then 会通过微任务队列，并在当前代码之后执行。
3. timeout 最后显示，因为它是一个宏任务。

更详细的事件循环图示如下(顺序是从上到下，即：首先是脚本，然后是微任务，渲染等)：

微任务会在执行任何其他事件处理，或渲染，或执行任何其他宏任务之前完成。

这很重要，因为它确保了微任务之间的应用程序环境基本相同(没有鼠标坐标更改，没有新的网络数据等)。

如果我们想要异步执行(在当前代码之后)一个函数，但是要在更改被渲染或新事件被处理之前执行，那么我们可以使用 queueMicrotask 来对其进行安排(schedule)。

这是一个与前面那个例子类似的，带有“计数进度条”的示例，但是它使用了 queueMicrotask而不是 setTimeout。你可以看到它在最后才渲染。就像写的是同步代码一样：