揭秘 JavaScript 事件循环：探索 Promise 和 setTimeout 的执行顺序

2023-12-23 06:01:09

大家好，我是[你的名字]，一名资深 JavaScript 开发者。今天，我想和大家探讨一个 JavaScript 的核心机制——事件循环（Event Loop），以及 Promise 和 setTimeout 等异步编程工具是如何在这个机制下运作的。这些知识对于理解 JavaScript 的异步编程和开发出高性能的应用程序非常重要。

JavaScript 的事件循环

事件循环是 JavaScript 运行时的核心组件，它负责协调代码的执行顺序。浏览器或 Node.js 都有一个事件循环，它不断检查是否有需要执行的事件或任务，然后将它们放入一个队列中。队列中的事件或任务会根据一定的规则被逐个执行。

Promise

Promise 是 JavaScript 中表示异步操作的常用工具。它可以让你在异步操作完成后执行一些回调函数。Promise 对象有三种状态：pending、fulfilled 和 rejected。pending 状态表示操作正在进行中，fulfilled 状态表示操作已成功完成，rejected 状态表示操作已失败。

setTimeout

setTimeout 是 JavaScript 中用于延迟执行函数的工具。它接受两个参数：要执行的函数和延迟时间（以毫秒为单位）。setTimeout 将在指定的延迟时间后将函数放入事件循环的队列中，然后该函数将被执行。

Promise 和 setTimeout 的执行顺序

那么，Promise 和 setTimeout 的执行顺序是怎样的呢？一般来说，Promise 会先执行，然后 setTimeout 才会执行。这是因为 Promise 是一个微任务（microtask），而 setTimeout 是一个宏任务（macrotask）。微任务会在事件循环的每个阶段执行，而宏任务只会在事件循环的最后一个阶段执行。

以下是一个示例代码，演示了 Promise 和 setTimeout 的执行顺序：

console.log('Start');

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

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

console.log('End');