JavaScript事件循环是单线程异步处理核心机制，按“同步代码→微任务→宏任务”顺序循环执行；微任务（如Promise.then）在当前宏任务结束后立即清空，宏任务（如setTimeout）每次仅执行一个。

JavaScript事件循环是运行时处理异步操作的核心机制，它让单线程的JS能在不阻塞主线程的前提下执行定时器、网络请求、用户交互等任务。关键在于它严格区分同步代码、宏任务和微任务，并按固定顺序交替执行。

事件循环的基本流程

每次循环（tick）中，JavaScript引擎会：

• 执行当前调用栈中的所有同步代码
• 清空微任务队列（如 Promises.then、MutationObserver 回调）
• 从宏任务队列中取出一个任务执行（如 setTimeout、setInterval、I/O、UI渲染）
• 重复上述步骤

宏任务 vs 微任务

这是理解执行顺序的关键：

• 宏任务：script整体代码、setTimeout、setInterval、setImmediate（Node.js）、I/O、UI渲染。每次事件循环只处理一个宏任务
• 微任务：Promise.then/catch/finally、queueMicrotask、MutationObserver。只要微任务队列非空，就会持续执行直到清空

微任务总在当前宏任务结束后、下一个宏任务开始前执行，因此优先级更高。

立即学习“Java免费学习笔记（深入）”；

Json Schema Toolkit

使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。

下载

常见执行顺序示例

以下代码的输出顺序能直观体现事件循环规则：

console.log(1);
setTimeout(() => console.log(2), 0);
Promise.resolve().then(() => console.log(3));
console.log(4);

输出为：1 → 4 → 3 → 2。原因：1和4是同步代码；3属于微任务，紧接在同步代码后执行；2是宏任务，要等到下一轮循环才执行。

实际开发中的注意点

事件循环直接影响代码行为和性能表现：

• 避免在同步逻辑中长时间运行（如大循环），否则会阻塞微任务和UI更新
• 用 queueMicrotask 替代 setTimeout(fn, 0) 实现更及时的异步调度
• Vue/React 的响应式更新常利用微任务保证视图刷新时机一致
• Node.js 中 process.nextTick 比 Promise 微任务更早执行（仅限Node环境）

不复杂但容易忽略。