事件循环是JavaScript异步执行的核心机制，其执行顺序为：清空调用栈→执行所有微任务→取一个宏任务→重复。微任务（如Promise.then）优先级高于宏任务（如setTimeout），故输出顺序为1→4→3→2。
JavaScript 的事件循环（Event Loop）是理解异步行为的核心机制。它决定了代码何时执行、回调如何排队、为什么 setTimeout 不会“准时”、以及为什么长时间运行的同步代码会让页面卡死——这些都不是 bug，而是事件循环按设计工作的结果。
事件循环的基本流程：调用栈 + 任务队列
JavaScript 是单线程的，只有一个主线程执行代码。事件循环持续监控两个关键部分：
调用栈（Call Stack）：当前正在执行的函数堆叠，遵循后进先出（LIFO）规则。 任务队列（Task Queue，也叫宏任务队列）：存放来自 DOM 事件、setTimeout、setInterval、setImmediate（Node.js）等产生的回调函数。 微任务队列（Microtask Queue）：存放 Promise.then/catch/finally、MutationObserver、queueMicrotask 等产生的回调，优先级高于宏任务。
事件循环每轮执行顺序是：清空当前调用栈 → 执行所有微任务（直到微任务队列为空）→ 取一个宏任务执行 → 再清空微任务 → 继续下一轮。这个顺序解释了为什么 Promise 总比 setTimeout 先执行，哪怕后者延时为 0。
宏任务 vs 微任务：实际执行顺序的关键
下面这段代码的输出顺序常让人困惑，但事件循环能清晰解释：
立即学习“Java免费学习笔记（深入）”；
console.log('1');setTimeout(() => console.log('2'), 0);Promise.resolve().then(() => console.log('3'));console.log('4');
输出是：1 → 4 → 3 → 2。原因如下：
1 和 4 是同步代码，立即入栈执行； setTimeout 回调进入宏任务队列； Promise.then 回调进入微任务队列； 同步代码执行完后，事件循环先处理微任务队列（输出 3），再取下一个宏任务（输出 2）。
为什么理解事件循环很重要
不理解事件循环，就容易写出阻塞 UI、误判异步时序、难以调试竞态问题的代码：
避免界面冻结：一个耗时 500ms 的 for 循环会霸占主线程，让按钮点击、滚动、动画全部卡住——因为事件循环无法插入任何任务。应改用 setTimeout 分片、requestIdleCallback 或 Web Worker。 正确处理异步依赖：比如在 fetch 后立即读取 DOM 节点，却忘了 DOM 渲染是微任务之后的渲染帧（属于另一阶段），可能读不到更新后的内容；此时需用 await new Promise(requestAnimationFrame) 或 queueMicrotask 做协调。 写出可预测的测试逻辑：单元测试中若依赖 setTimeout 模拟延迟，但实际想等 Promise 完成，却用了 jest.runAllTimers()，就会漏掉微任务，导致断言失败。
一个小技巧：快速判断代码何时执行
遇到不确定执行时机的异步操作，可以这样归类：
同步代码 → 立即执行； Promise.then、queueMicrotask、MutationObserver → 下一个微任务； setTimeout、setInterval、postMessage、I/O 回调（Node.js）→ 下一个宏任务； requestAnimationFrame → 下一帧绘制前（不属于标准事件循环队列，但有固定调度时机）。
基本上就这些。事件循环不复杂，但容易忽略细节——而正是这些细节，决定你的异步代码是稳健还是玄学。
以上就是javascript中的事件循环如何工作_为什么理解它很重要的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1543089.html
微信扫一扫 
支付宝扫一扫 
