事件循环先执行宏任务，再清空微任务队列。同步代码如console.log立即执行，setTimeout等宏任务进入宏任务队列，Promise.then等微任务进入微任务队列。当前宏任务结束后，依次执行所有微任务，之后再取下一个宏任务。async/await基于Promise，await后续代码被视为微任务。例如：script start→async1 start→async2→script end→async1 end→timeout，因await将“async1 end”推入微任务队列，在本轮宏任务结束后执行。
JavaScript 的事件循环机制是理解异步编程的关键。很多人在处理 setTimeout、Promise、async/await 时会感到困惑，原因就在于没有搞清楚宏任务（Macrotask）和微任务（Microtask）的执行顺序。下面我们就来清晰地梳理这套机制。
事件循环基础：什么是宏任务与微任务？
JavaScript 是单线程语言，所有代码都在一个主线程上执行。为了实现异步操作而不阻塞主线程，JS 引入了事件循环机制。这个机制依赖两个任务队列：
宏任务队列（Macrotask Queue）：也叫任务队列，用于存放宏任务。常见的宏任务包括：setTimeout、setInterval、I/O 操作、UI 渲染、script 标签中的整体代码。 微任务队列（Microtask Queue）：优先级高于宏任务。常见的微任务包括：Promise.then/catch/finally、queueMicrotask、MutationObserver（浏览器环境）。
每次事件循环开始时，先执行当前宏任务中的同步代码，然后清空微任务队列，再取下一个宏任务执行，如此反复。
执行顺序规则：宏任务与微任务如何调度？
事件循环遵循以下流程：
从宏任务队列中取出一个任务执行（比如 script 主代码块或 setTimeout 回调）。 执行过程中遇到同步代码，直接运行。 遇到微任务（如 Promise.then），将其加入微任务队列。 当前宏任务执行完毕后，立即清空微任务队列中所有任务，按先进先出顺序执行。 微任务清空后，进入下一轮事件循环，取下一个宏任务执行。
关键点是：每完成一个宏任务，就会把所有当前可用的微任务执行完。
实际例子：看懂输出顺序
来看一段经典代码：
console.log('start');setTimeout(() => { console.log('timeout');}, 0);Promise.resolve().then(() => { console.log('promise');});console.log('end');
输出结果为：
Spacely AI
为您的房间提供AI室内设计解决方案，寻找无限的创意
67 查看详情 
startendpromisetimeout
解释：
“start” 是同步代码，最先输出。 setTimeout 是宏任务，被放入宏任务队列。 Promise.then 是微任务，进入微任务队列。 “end” 是同步代码，紧接着输出。 当前宏任务（主 script）执行完，开始执行微任务，输出 “promise”。 微任务清空后，进入下一轮事件循环，执行 setTimeout 回调，输出 “timeout”。
async/await 与微任务的关系
async 函数返回一个 Promise，而 await 后面的表达式完成后，其后续代码会被当作微任务处理。
async function async1() { console.log('async1 start'); await async2(); console.log('async1 end');}async function async2() { console.log('async2');}console.log('script start');setTimeout(() => { console.log('timeout');}, 0);async1();console.log('script end');
输出为：
script startasync1 startasync2script endasync1 endtimeout
注意 “async1 end” 在 “script end” 之后输出，是因为 await 相当于把后面的代码包装成 Promise.then，属于微任务。
基本上就这些。掌握宏任务和微任务的执行时机，就能准确预测异步代码的输出顺序。不复杂但容易忽略细节。
以上就是JS事件循环机制解析_宏任务与微任务指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/871699.html
微信扫一扫 
支付宝扫一扫 
