JavaScript事件循环：微任务与宏任务解析

哈喽！今天心血来潮给大家带来了《JavaScript事件循环：微任务与宏任务详解》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

JavaScript 是单线程语言，通过事件循环（Event Loop）实现异步操作的管理。理解微任务与宏任务的执行机制，有助于掌握代码的实际执行顺序。

宏任务与微任务的基本概念

宏任务（Macrotask）：每次事件循环中执行的一个完整任务单元，例如：

• 整体脚本代码（script）
• setTimeout 回调
• setInterval 回调
• I/O 操作
• UI 渲染

微任务（Microtask）：在当前宏任务结束后、下一个宏任务开始前立即执行的任务，包括：

• Promise.then/catch/finally 回调
• queueMicrotask()
• MutationObserver（DOM 变化监听）

事件循环的执行流程

事件循环遵循以下规则：

• 先执行同步代码
• 遇到异步任务时，将其回调注册到对应的队列（宏任务或微任务）
• 当前宏任务执行完毕后，立刻清空所有可执行的微任务队列
• 微任务执行完后，进行一次可能的 UI 渲染，然后开始下一个宏任务

关键点：每个宏任务执行完后，必须清空当前所有的微任务，再进入下一个宏任务。

实际执行顺序示例

看一段典型代码来验证执行顺序：

输出结果是：1 → 4 → 3 → 2

解释：

• '1' 和 '4' 是同步代码，最先输出
• setTimeout 是宏任务，进入宏任务队列
• Promise.then 是微任务，在当前宏任务结束后立即执行
• 所以 '3' 在 '2' 之前输出

嵌套情况下的执行顺序

微任务可以继续产生新的微任务，这些也会在同一轮中被处理：

输出为：C → A → B

因为第一个 then 是微任务，执行时又添加了一个微任务，这个新微任务会在本轮微任务队列中继续执行。

基本上就这些。只要记住：宏任务划分阶段，微任务穿插在中间且优先执行。不复杂但容易忽略细节。

本篇关于《JavaScript事件循环：微任务与宏任务解析》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！