JavaScript事件循环机制_宏任务与微任务

幻影之瞳 2025-11-27 00:00:00 次阅读

JavaScript通过事件循环处理异步操作，宏任务（如setTimeout、script代码）执行后会清空所有微任务（如Promise回调、queueMicrotask），微任务优先级高于宏任务，确保异步逻辑正确执行。

JavaScript 是单线程语言，所有任务都在一个主线程上执行。为了协调代码的执行顺序，特别是处理异步操作，JavaScript 引入了事件循环（Event Loop）机制。其中，宏任务（Macro Task）和微任务（Micro Task）是理解事件循环的关键。

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

宏任务：每次执行栈中执行的代码就是一个宏任务。常见的宏任务包括：

整体 script 代码
setTimeout 回调
setInterval 回调
I/O 操作
UI 渲染

微任务：在当前宏任务执行结束后、下一个宏任务开始前执行的任务。微任务具有更高的优先级。常见的微任务包括：

Promise 的 .then、.catch、.finally 回调
queueMicrotask()
MutationObserver（浏览器环境）

事件循环的执行流程

事件循环遵循以下规则：

先执行同步代码（即第一个宏任务）
当同步代码执行完毕，检查是否有微任务待执行
如果有，依次执行所有微任务（清空微任务队列）
微任务执行完后，进入下一个宏任务的执行
重复上述过程

关键点：每个宏任务执行完后，都会清空当前所有的微任务。

实际例子解析执行顺序

看下面这段代码：

console.log('script start');

setTimeout(() => {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(() => {
  console.log('promise1');
}).then(() => {
  console.log('promise2');
});

console.log('script end');

输出结果为：

script start
script end
promise1
promise2
setTimeout

解释：

“script start” 和 “script end” 是同步代码，属于第一个宏任务，直接输出
遇到 setTimeout，将其回调加入宏任务队列
遇到 Promise.then，将 then 的回调加入微任务队列
同步代码执行完毕，开始执行微任务：输出 promise1 和 promise2
微任务清空后，进入下一个宏任务：执行 setTimeout 回调，输出 setTimeout

注意点与常见误区

微任务不是立即执行的，而是在当前宏任务结束后统一执行。即使你在 setTimeout 中创建一个 Promise，它的 then 回调依然会作为微任务，在该 setTimeout（宏任务）执行完后立即执行。

例如：

setTimeout(() => {
  console.log('timeout');
  Promise.resolve().then(() => {
    console.log('nested promise');
  });
}, 0);

Promise.resolve().then(() => {
  console.log('top promise');
});