如何理解 JavaScript 中的事件循环（Event Loop）？

如何理解 JavaScript 中的事件循环（Event Loop）？

回答：
JavaScript 是单线程语言，但通过事件循环机制实现了异步操作。事件循环负责协调调用栈（Call Stack）、任务队列（Task Queue，也称宏任务队列）和微任务队列（Microtask Queue）之间的执行顺序。

其基本流程如下：

1. 执行全局同步代码，压入调用栈。
2. 遇到异步操作（如 setTimeout、Promise.then、fetch 等），将其回调分别放入宏任务队列或微任务队列。
3. 当调用栈为空时，事件循环先检查微任务队列，依次执行所有微任务（直到队列清空）。
4. 然后从宏任务队列中取出一个任务执行。
5. 重复上述过程。

关键点：

• 微任务（如 Promise.then、queueMicrotask、MutationObserver）优先级高于宏任务（如 setTimeout、setInterval、I/O）。
• 每次宏任务执行完后，会清空当前所有微任务，再处理下一个宏任务。

示例：

console.log('1');

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

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

console.log('4');

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

解析：

• '1' 和 '4' 是同步代码，先执行。
• Promise.then 回调被加入微任务队列。
• setTimeout 回调被加入宏任务队列。
• 同步代码执行完毕后，事件循环先处理微任务（输出 '3'），再处理宏任务（输出 '2'）。

理解事件循环对掌握 JavaScript 异步编程、避免常见陷阱（如定时器延迟、Promise 执行时机）至关重要。