JavaScript 中的事件循环（Event Loop）是如何工作的？

JavaScript的事件循环机制是实现异步编程的核心原理，其运作方式如下：

事件循环的基本工作流程：

1. 同步执行：浏览器主线程（Call Stack）依次执行同步代码（如console.log），将执行结果压入调用栈。
2. 异步任务分层：当遇到异步操作（如setTimeout、Promise、fetch等）时，其回调函数将被放入对应的任务队列：
   • 宏任务队列（Macrotask）：包含setTimeout、setInterval、I/O操作、UI渲染等，需在调用栈空闲时执行。
   • 微任务队列（Microtask）：包含Promise的then/catch/finally、queueMicrotask、MutationObserver等，优先于宏任务执行。
3. 任务调度：当调用栈为空时，事件循环先清空微任务队列（按顺序执行所有回调），随后从宏任务队列中取出首个任务执行。
4. 循环执行：重复上述过程，直到所有任务完成。

示例代码：

console.log('1');

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

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

console.log('4');

输出顺序为：1 → 4 → 3 → 2

解析：

• 同步代码（console.log('1')和console.log('4')）立即执行。
• Promise.then属于微任务，在当前宏任务完成后立即执行。
• setTimeout属于宏任务，需等待下一轮事件循环执行。

理解事件循环的运作机制对于掌握JavaScript的异步编程模式、优化性能表现以及调试复杂异步逻辑具有重要意义。