了解 JavaScript 事件循环（变得简单）

了解 JavaScript 事件循环（变得简单）

JavaScript 事件循环 使 JavaScript 中的异步编程成为可能。简单解释一下！

---

？关键概念

1. 单线程

JavaScript 只能一次做一件事，因为它是单线程的。

console.log("Task 1");
console.log("Task 2");

？输出：

Task 1
Task 2

2. 同步与异步

• 同步任务：按顺序依次运行。
• 异步任务：不阻塞主线程；他们等到准备好逃跑。

console.log("Start");

setTimeout(() => {
  console.log("Async Task");
}, 1000);

console.log("End");

？输出：

Start
End
Async Task

---

？事件循环如何工作

1. 调用堆栈

   • 任务一一执行的地方。
   • 当函数运行时，它会被添加到堆栈中。完成后，它会被删除。

2. Web API

   • 异步任务（如setTimeout）在这里处理。他们在后台等待。

3. 回调队列

   • 异步任务完成后，其回调将添加到队列中。

4. 事件循环

   • 事件循环检查：
     1. 调用堆栈是否为空？
     2. 如果是，它会从回调队列中获取任务并将它们推入堆栈。

---

✨ 示例：一步一步

console.log("Start");

setTimeout(() => {
  console.log("Timeout Task");
}, 2000);

console.log("End");

1️⃣ 调用堆栈

Step	Call Stack	Notes
1	console.log	Logs "Start"
2	setTimeout	Registers timeout task
3	console.log	Logs "End"

2️⃣ 网络 API

• setTimeout 转移到 Web API 并启动计时器。

3️⃣ 回调队列

• 2000ms 后，回调 (() => console.log("Timeout Task")) 移至队列。

4️⃣ 事件循环

• 事件循环检查调用堆栈是否为空。
• 回调被移动到堆栈并执行。

？最终输出：

Start
End
Timeout Task

---

？可视化事件循环

要真正了解事件循环，请查看以下资源：

• 放大镜
• MDN：并发模型

编码愉快！ ？

以上是了解 JavaScript 事件循环（变得简单）的详细内容。更多信息请关注PHP中文网其他相关文章！