JS事件循环机制解析_宏任务与微任务指南

事件循环先执行宏任务，再清空微任务队列。同步代码如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');

输出结果为：

腾讯小微

基于微信AI智能对话系统打造的智能语音助手解决方案

26

查看详情

start
end
promise
timeout

解释：

• “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 start
async1 start
async2
script end
async1 end
timeout

注意 “async1 end” 在 “script end” 之后输出，是因为 await 相当于把后面的代码包装成 Promise.then，属于微任务。

基本上就这些。掌握宏任务和微任务的执行时机，就能准确预测异步代码的输出顺序。不复杂但容易忽略细节。

以上就是JS事件循环机制解析_宏任务与微任务指南的详细内容，更多请关注php中文网其它相关文章！