JavaScript 事件循环机制详解：同步、异步与执行栈

前言

在探讨 JavaScript 的同步与异步问题之前，必须明确一个核心前提：JavaScript 是单线程语言。之所以设计为单线程，是由其主要应用场景决定的——用户与页面的交互。如果 JavaScript 采用多线程模型，可能会引发冲突：例如在一个线程中点击按钮增加 DOM 节点，而在另一个线程中点击同一按钮删除该节点，此时引擎将无法确定执行哪个操作，导致状态混乱。此外，引入异步机制是为了解决同步执行带来的性能瓶颈。若没有异步处理，当向服务器请求数据且网络状况不佳时，同步代码会阻塞后续执行，导致网页长时间无响应，严重损害用户体验。

执行栈与任务队列

执行栈

• 在理解执行栈之前，先回顾数据结构中的“栈”。栈是一种遵循“先进后出”（LIFO）原则的数据结构，类似于一个桶，最后放入的物品必须最先取出。

执行栈则是将代码块转化为具体的代码任务进行管理的结构。为了更清晰地说明，我们结合具体代码进行分析：

function fn (count) {
            if (count <= 0) return
            fn(count - 1)
            console.log(count)
        }
fn(3)

以下是一段简单的递归代码，配合图示进行解释（注：图示中栈底实际应为全局执行上下文）：

JavaScript 中的所有任务均在主线程上执行，并由此形成一个执行栈。请务必牢记这一核心概念。

任务队列

与栈不同，队列遵循“先进先出”（FIFO）原则，这与我们日常排队的逻辑一致：先进入队伍的人先离开。在 JavaScript 中，任务队列通俗地理解为存放异步任务回调函数的容器。请再次牢记这一点。

同步任务与异步任务

首先梳理基础概念：

同步任务

许多开发者容易从字面误解“同步任务”，认为它们是“一起执行”的。实际上，同步任务是指必须等待前一个任务执行完毕后，才能开始执行下一个任务。这一概念并不复杂，通过以下简单代码即可验证：

console.log(1)
console.log(2)
console.log(3)

代码逻辑直观，输出结果为 1、2、3。这表明同步代码在主线程中排队，依次进入执行栈执行，直到执行栈清空。

异步任务

通过以下示例进行说明：

console.log(1)
setTimeout(() => {
    console.log(2)
}, 1000)
console.log(3)

该代码的输出顺序为 1、3、2，与代码书写顺序不一致。这就是异步代码的特征：它不按照代码的执行顺序直接运行。

官方定义指出：异步任务不进入主线程，而是进入“任务队列”（Event queue）。只有当任务队列通知主线程某个异步任务可以执行时，其回调函数才会被推入主线程执行。若对此尚存疑惑，后续讲解事件循环时将豁然开朗。

js的执行机制

首先梳理关键概念：

• 1. 同步任务由 JavaScript 主线程按顺序依次执行。
• 2. 异步任务委托给宿主环境（如浏览器或 Node.js）执行。
• 3. 异步任务完成后，其回调函数会被加入任务队列等待执行。任务队列进一步划分为宏任务队列和微任务队列，其中优先执行微任务队列。常见的微任务包括 `new Promise().then`，常见的宏任务包括定时器（setTimeout/setInterval）。
• 4. 当 JavaScript 主线程的执行栈被清空后，会读取任务队列中的回调函数，并按次序执行。
• 5. JavaScript 主线程会不断重复上述第 4 步，在执行回调函数的过程中，若遇到新任务，则再次按照上述步骤处理。

JavaScript 持续从任务队列中取出回调函数并放入主线程执行，这一过程循环往复，因此被称为“事件循环”（Event Loop）。

为了更直观地理解，我们结合一段代码进行分析：

const promise = new Promise((resolve, reject) => {
      console.log(1);
      setTimeout(() => {
          console.log("timerStart");
          resolve("success");
          console.log("timerEnd");
       }, 0);
      console.log(2);
  });
  promise.then((res) => {
      console.log(res);
  });
  console.log(4);

现在，我们依据上述规则逐步剖析这段代码。即使不熟悉 Promise 也不影响理解事件循环的核心逻辑。请将自己视为 JavaScript 代码的“检察官”，负责将代码正确放置到相应的“位置”。

• 检察官的第一步是区分同步代码与异步代码。从上至下分析：`Promise` 构造函数本身是同步执行的，因此它应在主线程排队；接着查看 `promise.then`，这是一个异步任务，属于微任务，其回调函数应放入微任务队列（此时尚未入队）；最后一句 `console.log(4)` 是同步代码，同样在主线程排队。
• 第二步，执行主线程上的同步代码。首先遇到 `Promise` 构造函数，输出 1；随后遇到定时器，将其挂起执行。由于定时器延迟时间为 0，其回调函数被直接放入宏任务队列。继续执行代码，遇到打印语句，输出 2。此时主线程中是否还有同步代码？是的，还有一个输出语句，因此输出 4。至此，主线程上的同步代码执行完毕。
• 第三步，读取任务队列。由于微任务队列为空（`Promise` 状态未改变，`promise.then` 回调未触发），因此读取宏任务队列中的回调函数。该回调进入主线程执行，首先输出 `timerStart`；随后 `Promise` 状态变为 resolved，接着执行输出语句，输出 `timerEnd`。此时主线程再次清空，需检查任务队列中是否还有剩余任务。
• 第四步，由于 `Promise` 状态已改变，微任务队列中现存在回调函数。执行该回调，输出 `res` 的值，即 `success`。

结语

本文介绍了 JavaScript 事件循环中同步任务与异步任务的核心机制。如需了解更多关于 JS 事件循环的内容，欢迎查阅本站相关文章或继续浏览后续内容，感谢大家的支持！