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

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（浏览器环境）

事件循环的执行流程

事件循环遵循以下规则：

立即学习“Java免费学习笔记（深入）”；

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

实际例子解析执行顺序

看下面这段代码：

console.log('script start');

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

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

console.log('script end');

输出结果为：

Medeo

AI视频生成工具

191

查看详情

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');
});

输出：

top promise
timeout
nested promise

说明：首次宏任务结束后执行 top promise；然后进入 setTimeout 宏任务，输出 timeout 后，其内部的微任务接着执行。

基本上就这些。理解宏任务和微任务的执行时机，能帮助你更好掌握 JavaScript 异步编程的逻辑。不复杂但容易忽略细节。

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