JavaScript 事件循环详解 🔄

什么是事件循环？

事件循环（Event Loop）是 JavaScript 运行时的核心机制，负责处理 异步任务 和 回调函数 的执行顺序。它让 JavaScript 能在单线程环境下处理多任务，通过非阻塞方式实现高效运行。

事件循环的工作原理

1. 同步代码执行
   所有同步任务按顺序执行，阻塞后续代码。

   console.log('同步代码');
   setTimeout(() => {
     console.log('异步代码');
   }, 0);
   

   👉 输出：同步代码 → 异步代码（因事件循环调度）

2. 任务队列

   • 宏任务（Macro Tasks）：如 setTimeout、setInterval、DOM 事件
   • 微任务（Micro Tasks）：如 Promise.then、MutationObserver
     📌 微任务优先级高于宏任务，会在当前任务结束后立即执行。

3. 循环流程

   - 执行栈清空后，从任务队列中取出任务 - 微任务队列优先处理，再处理宏任务 - 重复上述过程，直到队列为空

实际应用示例

• setTimeout：延迟执行代码

  setTimeout(() => {
    console.log('延迟 1 秒执行');
  }, 1000);
  

• Promise：异步操作的处理

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

• 事件监听：用户交互触发

  document.addEventListener('click', () => {
    console.log('点击事件');
  });
  

深入学习推荐

想要了解更多关于事件循环的细节，可以查看 JavaScript 事件循环详解 中的进阶内容，包括浏览器与Node.js的差异、事件循环的阶段划分等。