JavaScript 事件循环（Event Loop）|极客笔记

JavaScript 事件循环（Event Loop）

引言

在 JavaScript 的学习过程中，我们常常会遇到异步编程、回调函数等概念。这些概念都与 JavaScript 执行环境中的事件循环（Event Loop）密切相关。了解事件循环的工作原理是理解异步编程的关键。本文将详细讲解 JavaScript 事件循环的概念、执行顺序和示例代码。

什么是事件循环？

JavaScript 是一门单线程的语言，也就是说，它在任何给定的时间只能执行一个任务。然而，JavaScript 又常常需要处理一些需要等待的任务，例如读取文件、发起网络请求等。为了实现这些异步操作，JavaScript 引入了事件循环机制。

事件循环是 JavaScript 实现异步编程的基础。它是一个不断运行的循环，用于处理各种事件和任务。事件可以是用户操作、网络请求、定时器等。每个事件都会被分配到一个任务队列中，然后按照一定的顺序被执行。

JavaScript 执行环境

在进一步了解事件循环之前，我们先来了解一下 JavaScript 的执行环境。JavaScript 代码可以在浏览器端和服务器端（Node.js）中执行，每个执行环境都有自己的事件循环机制。这里我们以浏览器端为例进行讲解。

浏览器的执行环境包含一个主线程（通常是单一的线程），用于执行 JavaScript 代码、处理 DOM 操作、渲染页面等。除了主线程，浏览器还提供了其他线程，用于处理一些耗时的操作，例如网络请求、文件读写等。这些线程通过事件循环与主线程进行通信。

事件循环的执行顺序

事件循环的执行顺序由以下几个组成部分决定：

执行栈（Call Stack）：用于存储执行的函数调用。JavaScript 是通过单线程执行的，所以只能一次执行一个函数调用。所有的函数调用都会被按照顺序推送到执行栈中执行。
任务队列（Task Queue）：用于存储将要执行的异步任务。当事件发生时，将其相关的回调函数推送到任务队列中等待执行。
事件循环（Event Loop）：不断地检查执行栈和任务队列。当执行栈为空时，会从任务队列中取出一个任务，并将其压入执行栈中执行。这个过程一直循环执行，直到任务队列为空。

下面是事件循环的简化示意图：

+------------------------------------+
|                                    |
|              事件循环                |
|                                    |
|          +-------------+             |
|   +----> |  执行栈   | <-----------+
|   |      +-------------+             |
|   v                                 |
|          +-------------+             |
|   +----> |  任务队列  | <-----------+
|   |      +-------------+             |
|   v                                 |
|                                    |
+------------------------------------+

任务队列的分类

任务队列可以分为两种类型：微任务队列（Microtask Queue）和宏任务队列（Macrotask Queue）。它们之间存在优先级关系：

微任务队列：优先级更高，会在下一个事件循环中立即执行。通常包括 Promise 的回调函数、process.nextTick、Object.observe 等。
宏任务队列：优先级较低，会在下一个事件循环中被依次执行。通常包括定时器回调函数（setTimeout、setInterval）、I/O 操作、UI 渲染等。

示例代码

接下来，我们通过一些示例代码来理解事件循环的执行顺序。请注意，为了更好地理解事件循环的执行顺序，下面的代码使用了 ECMAScript 6 语法（箭头函数、let 和 const 关键字等）。

示例 1：微任务与宏任务

console.log('Start');

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

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

console.log('End');

上述代码中，我们使用了 setTimeout 创建了一个定时器任务，延迟为 0ms，即下一个事件循环立即执行。同时，我们使用了 Promise.resolve().then() 创建了一个微任务，会在当前事件循环的末尾执行。

运行上述代码，输出如下：

Start
End
Promise
setTimeout

解析示例 1 的执行顺序如下：

开始执行代码，将 console.log('Start') 推入执行栈，输出 Start。
将 setTimeout 的回调推入宏任务队列，将 Promise 的回调推入微任务队列。
将 console.log('End') 推入执行栈，输出 End。
当前事件循环结束，执行微任务队列中的任务，输出 Promise。
执行栈为空，开始执行下一轮事件循环。将宏任务队列中的任务 setTimeout 的回调推入执行栈，输出 setTimeout。

示例 2：多个微任务与宏任务

console.log('Start');

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

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

console.log('End');

上述代码中，我们在 Promise.resolve().then() 的回调函数内创建了另一个微任务。即使是嵌套的微任务也会按照顺序执行。

运行上述代码，输出如下：

Start
End
Promise 1
Promise 2
setTimeout

解析示例 2 的执行顺序如下：

开始执行代码，将 console.log('Start') 推入执行栈，输出 Start。
将 setTimeout 的回调推入宏任务队列，将 Promise 1 的回调推入微任务队列。
将 console.log('End') 推入执行栈，输出 End。
当前事件循环结束，执行微任务队列中的任务 Promise 1，输出 Promise 1。
将 Promise 2 的回调推入微任务队列。
执行栈为空，开始执行下一轮事件循环。将微任务队列中的任务 Promise 2 推入执行栈，输出 Promise 2。
执行栈为空，开始执行下一轮事件循环。将宏任务队列中的任务 setTimeout 的回调推入执行栈，输出 setTimeout。

示例 3

setTimeout(() => {
  console.log('setTimeout 1');
  Promise.resolve().then(() => {
    console.log('Promise 3');
  });
}, 0);

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

上述代码中，我们创建了两个定时器任务，并在其中一个定时器的回调函数中创建了一个嵌套的微任务。

运行上述代码，输出结果如下：