事件循环浅析：Promise 代码为什么优先于 setTimeout 执行？

在 JavaScript 的世界里，事件循环是一个负责管理代码执行顺序的关键机制。它决定了代码在堆栈和消息队列之间如何流动，从而塑造了程序的执行方式。其中，Promise 和 setTimeout 作为两种重要的异步编程工具，它们的执行顺序常常令人困惑。

本文将深入浅出地探讨事件循环机制，详细解释为什么 Promise 里的代码通常比 setTimeout 先执行，并提供清晰的示例代码和图表说明。通过理解这些概念，开发者可以写出更加高效、健壮的 JavaScript 代码。

事件循环机制

JavaScript 事件循环是一个单线程模型，这意味着它一次只能执行一个任务。当一个任务完成后，事件循环会从消息队列中获取下一个任务并将其推入执行堆栈中。

事件循环中存在两种类型的任务：

• 微任务： 由 Promise.then() 和 async/await 产生的任务。
• 宏任务： 由 setTimeout()、setInterval() 和事件监听器产生的任务。

Promise 和 setTimeout

Promise 是一种用来处理异步操作的强大工具。当一个 Promise 被创建时，它会立即执行，并根据其状态（fulfilled、rejected 或 pending）注册微任务。

另一方面，setTimeout() 函数创建一个宏任务，在指定的时间延迟后执行。

Promise 先于 setTimeout 执行的原因

当一个 Promise 被创建时，它会立即注册一个微任务。微任务具有比宏任务更高的优先级，因此它们会在宏任务之前执行。这意味着，即使 setTimeout() 函数先于 Promise 被调用，Promise 里的代码也会先执行。

这是因为事件循环会依次从消息队列中获取任务，并根据它们的优先级执行它们。微任务始终优先于宏任务，因此 Promise 的微任务会先于 setTimeout 的宏任务执行。

示例代码

以下代码演示了 Promise 先于 setTimeout 执行的情况：

setTimeout(() => {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise');
});

输出结果：

Promise
setTimeout

正如我们所见，即使 setTimeout() 函数先被调用，Promise 里的代码还是先执行了。

结论

理解事件循环机制对于编写高效、健壮的 JavaScript 代码至关重要。通过了解 Promise 和 setTimeout 的执行顺序，开发者可以更好地控制异步代码的执行。记住，Promise 里的代码通常会先于 setTimeout 执行，因为微任务的优先级高于宏任务。