理解 JavaScript 事件循环（简化）

# Web 开发# 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

    🔄 事件循环如何工作

  • 调用堆栈 任务逐一执行的地方。当一个函数运行时，它会被添加到堆栈中。当它完成后，它会被移除。
  • Web API 异步任务（如 setTimeout）在此处理。它们在后台等待。
  • 回调队列 一旦异步任务完成，其回调就会被添加到队列中。
  • 事件循环 事件循环检查：调用堆栈是否为空？如果为空，则从回调队列中取出任务并将其推送到堆栈。

    • ✨ 示例：分步说明

    console.log("Start");

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

console.log("End");

    1️⃣ 调用堆栈

    2️⃣ Web API

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

    • 3️⃣ 回调队列

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

    • 4️⃣ 事件循环

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

    • 👉最终输出：

    Start
End
Timeout Task

    🚀 可视化事件循环

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

  • 放大镜
  • MDN：并发模型

    • 祝你编码愉快！🎉