深入探索Event Loop，剖析Promise与setTimeout的协同运转

前端

2023-09-04 23:15:16

理解Event Loop、Promise和setTimeout的执行顺序

Event Loop是什么？

JavaScript 是一种单线程语言，这意味着它一次只能执行一项任务。为了在单线程中处理多个任务，浏览器引入了 Event Loop。Event Loop 就像一个事件循环，它不断地从事件队列中取出事件并执行它们。

事件队列

事件队列是一个先进先出的队列，这意味着最早进入队列的事件将最先被执行。当 JavaScript 引擎遇到一个异步操作，例如 Promise 或 setTimeout，它会将该操作添加到事件队列中，然后继续执行其他任务。

Promise和setTimeout

Promise 和 setTimeout 都是 JavaScript 中用于异步编程的技术。

Promise： 用于处理异步操作的结果（成功或失败）。
setTimeout： 用于在指定的时间后执行回调函数。

执行顺序

Event Loop 的执行流程如下：

JavaScript 引擎从事件队列中取出一个事件。
引擎执行该事件。
如果事件与 Promise 有关，引擎将根据 Promise 的状态（已解决或已拒绝）执行操作。
如果事件与 setTimeout 有关，引擎将执行 setTimeout 的回调函数。
重复步骤 1-4，直到事件队列为空。

实战示例

console.log('1'); // 同步任务

setTimeout(() => {
  console.log('2'); // 异步任务，延迟 0 毫秒
}, 0);

Promise.resolve().then(() => {
  console.log('3'); // 异步任务，立即执行
});

console.log('4'); // 同步任务

在这个示例中：

JavaScript 引擎首先执行 console.log('1')。
引擎将 setTimeout 和 Promise 添加到事件队列中，然后继续执行 console.log('4')。
setTimeout 的延迟时间为 0 毫秒，因此它立即添加到队列的末尾。
Promise.resolve() 也会立即执行，添加到队列的末尾。
当 Event Loop 返回到事件队列时，它首先执行 setTimeout 的回调（console.log('2')），因为它比 Promise 先进入队列。
然后，它执行 Promise 的回调（console.log('3')）。

结论

了解 Event Loop、Promise 和 setTimeout 的执行顺序对于理解和编写异步 JavaScript 代码至关重要。掌握这些概念可以帮助你避免难以追踪的错误，并编写更健壮的代码。