使用 setTimeout 和一个承诺运行几行，输出顺序可能会让您感到惊讶。 JavaScript 事件循环 解释了原因。它是一种让单线程语言处理计时器、网络调用和点击而不会冻结的机制。

一旦你理解了它，一整类令人困惑的错误就开始变得有意义了。我们在 Node.js 24 上运行每个示例，输出来自该运行。核心排序规则也适用于浏览器，我们指出 Node.js 的不同之处。如果您已经了解 JavaScript Promise 的基础知识，您将从中获得更多。

为什么存在事件循环

JavaScript 在一个主线程上执行代码，因此一次只运行其中的一部分。如果它只是等待网络请求，页面将冻结，直到响应返回。

所以 JavaScript 不会等待。缓慢的工作被交给主机环境，即浏览器或 Node.js，它们可以在后台处理它。当该工作完成后，回调将被放置在队列中。事件循环的工作是在堆栈空闲时将排队的回调移至堆栈上。

想象一个厨师独自工作。厨师将菜肴放入烤箱并设置计时器，而不是盯着它。当计时器响起时，任务就会出现在列表中，厨师在完成当前手头的任务后会选择它。

运动部件

任务有时称为宏任务。严格来说，任务源可能有多个，具体细节因环境而异。

规则

1. 运行所有同步代码，直到调用堆栈为空。
2. 运行所有微任务，包括在此过程中添加的任何新任务。
3. 在浏览器中，如果更新到期则呈现更新。
4. 从队列中取出一个任务并运行它。
5. 返回步骤 2。

最重要的细节：所有 微任务，然后是一个 任务。大多数事件循环难题都是通过应用该单一规则来解决的。

查看订单

console.log("1 sync");
setTimeout(() => console.log("5 timeout"), 0);
Promise.resolve().then(() => console.log("3 promise"));
queueMicrotask(() => console.log("4 microtask"));
console.log("2 sync");

// 1 sync
// 2 sync
// 3 promise
// 4 microtask
// 5 timeout

这就是发生的事情。两条 console.log 线是同步的，因此它们先运行。 Promise 回调和 queueMicrotask 进入微任务队列，一旦堆栈为空，它们就会按照添加的顺序运行。计时器回调必须等待任务轮流，即使其延迟为零。

微任务在定时器之间运行

每个任务完成后，微任务队列都会再次清空。这个例子证明了这一点：

setTimeout(() => {
  console.log("timer 1");
  Promise.resolve().then(() => console.log("promise inside timer 1"));
}, 0);
setTimeout(() => console.log("timer 2"), 0);

// timer 1
// promise inside timer 1
// timer 2

在第一个计时器期间创建的 Promise 在第二个计时器之前运行。现代浏览器和 Node.js 11 及更高版本的行为方式都是如此。

哪里适合等待

await 将一个函数一分为二。它之前的所有内容都是同步运行的，而之后的所有内容都被安排为微任务。这让很多人感到惊讶：

async function task() {
  console.log("A before await");
  await null;
  console.log("C after await");
}

task();
console.log("B after calling task");

// A before await
// B after calling task
// C after await

async 函数不会在后台启动。它在同一个线程上运行，直到到达第一个 await。这甚至适用于等待不是真正承诺的事情，例如 null。有关此语法的更多信息，请参阅我们的 JavaScript async/await 指南。

阻塞循环

当同步代码运行时，其他任何东西都不能运行。为了说明这一点，我们将计时器设置为 0 毫秒，然后让线程保持忙碌半秒：

const start = Date.now();
setTimeout(() => console.log("timer ran after", Date.now() - start, "ms"), 0);
while (Date.now() - start < 500) {}

// timer ran after about 500 ms

计时器的延迟是最小值，而不是保证。它仅在堆栈空闲时运行。在网页上，像这样的长循环意味着点击没有响应并且动画停止。在服务器上，每个其他请求都必须等待，这就是为什么一个缓慢的同步调用可能会损害 Node.js 进程的所有用户。

阻塞的常见原因包括巨大的循环、解析非常大的 JSON、请求处理程序中的同步文件函数（如 readFileSync）以及灾难性的正则表达式。

保持积极响应

对于繁重的工作，给事件循环一个喘息的机会。一种方法是时不时地暂停计时器，这样可以运行其他任务：

const items = [0, 1, 2, 3, 4];

async function processAll() {
  for (const item of items) {
    if (item === 2) await new Promise((r) => setTimeout(r, 0));
    console.log("item", item);
  }
}

setTimeout(() => console.log("other work gets a turn"), 0);
processAll();

// item 0
// item 1
// other work gets a turn
// item 2
// item 3
// item 4

另一个计时器在中间运行，因为我们完成了真正的任务。真正的代码每隔这么多的项目或毫秒就会产生一次。对于真正需要大量 CPU 的工作（例如图像处理），请使用浏览器中的 Web Worker 或 Node.js 中的工作线程，它们在单独的线程上运行。

微任务饥饿

由于循环在继续之前完全清空微任务队列，因此不断调度更多的微任务可以停止其他一切。我们用 100,000 个链式微任务对此进行了测试：

let count = 0;
let timerFired = false;
setTimeout(() => { timerFired = true; }, 0);

function spin() {
  count++;
  if (count < 100000) queueMicrotask(spin);
  else console.log("timer fired during microtasks?", timerFired);
}
queueMicrotask(spin);

// timer fired during microtasks? false

在所有任务都完成之前，计时器无法运行。如果该链永远不会结束，计时器将永远不会触发，并且在浏览器中页面永远不会重新绘制。请注意，在已解决的 Promise 上使用 await 进行屈服在这里没有帮助，因为它只是添加了另一个微任务。你需要一个真正的任务，比如计时器，来给其他人轮到时间。

在浏览器中渲染

浏览器通常有机会在任务之间进行绘制。这解释了一个常见的错误：

spinner.hidden = false;
doHeavyWork();              // blocks the thread
spinner.hidden = true;

微调器永远不会出现，因为浏览器没有机会在这些行之间进行渲染。要解决这个问题，请在繁重的工作开始之前让框架通过，或者将该工作移交给工人。对于更改视觉效果的代码，requestAnimationFrame 在下一次绘制之前运行，这使其成为动画的正确工具。

Node.js 差异

Node.js 有自己的事件循环，有几个阶段，包括计时器、I/O 轮询和 setImmediate。它还有 process.nextTick，在自己的队列中运行。以下是我们从异步函数内部运行它们时看到的结果：

setTimeout(() => console.log("timeout"), 0);
setImmediate(() => console.log("immediate"));
process.nextTick(() => console.log("nextTick"));
Promise.resolve().then(() => console.log("promise"));

// promise
// nextTick
// immediate
// timeout

许多文章指出，nextTick 总是胜过承诺，而计时器胜过 setImmediate。我们的结果表明事情没那么简单。我们的代码已经在微任务中运行，因此承诺队列首先进行。已知 setTimeout 和 setImmediate 的顺序会根据它们的调用位置而变化。因此，不要编写依赖于这些确切顺序的代码。如果一件事必须接连发生，请将它们明确地链接起来。

面试测验

在阅读答案之前尝试计算出顺序：

console.log("a");
setTimeout(() => console.log("b"), 0);
Promise.resolve().then(() => {
  console.log("c");
  setTimeout(() => console.log("d"), 0);
  Promise.resolve().then(() => console.log("e"));
});
console.log("f");

我们的运行打印了 a, f, c, e, b, d。原因如下：

1. a 和 f 是同步的，因此它们首先运行。
2. 堆栈为空，因此微任务在同一轮中运行：c，然后是新的微任务 e。
3. 现在有一个任务：计时器b，它首先排队。
4. 然后是下一个任务：定时器d，它在微任务期间排队。

常见错误

• 认为setTimeout是正确的。延迟只是最小的。
• 认为async意味着另一个线程。在等待之间，异步代码仍然在主线程上运行。
• 使用睡眠来修复排序。等待实际情况要可靠得多，这也适用于片状测试。
• 将forEach与await一起使用。它不会在项目之间等待。请参阅 JavaScript 数组方法。
• 在服务器处理程序中执行繁重的同步工作。 一个请求可能会延迟所有其他请求。

最后的话

请记住核心规则：运行堆栈直到其为空，运行所有微任务，然后运行一个任务，然后重复。其他一切都随之而来。为了让它坚持下去，请编写您自己的上述测验版本，在纸上预测输出，然后运行它。犯错并理解原因比任何图表都更能教会你。

常见问题

继续学习