J*aScript事件循环机制详解

J*aScript通过事件循环实现异步非阻塞，执行顺序为：同步代码 → 微任务 → 宏任务；例如console.log('1')、Promise.then、setTimeout(0)的输出顺序是1→4→3→2，因微任务在宏任务后立即清空。

javascript事件循环机制详解

J*aScript 是单线程语言，这意味着它同一时间只能处理一个任务。但现实中的应用往往需要处理异步操作，比如网络请求、定时器、用户交互等。为了解决异步执行的问题，J*aScript 引入了事件循环（Event Loop）机制，它是 J*aScript 实现非阻塞行为的核心。

J*aScript 运行环境与执行栈

J*aScript 代码在执行时，依赖于一个叫做调用栈（Call Stack）的结构。每当函数被调用，就会被推入栈顶；函数执行完毕后，从栈中弹出。这个过程是同步的，遵循“后进先出”原则。

例如：

function foo() {
console.log("foo");
}
function bar() {
foo();
}
bar(); // 调用顺序：bar → foo → 执行输出 → 弹出

但如果遇到异步操作，比如 setTimeout 或 fetch，它们不会立即执行回调，而是交由浏览器的其他模块处理，避免阻塞主线程。

任务队列：宏任务与微任务

事件循环依赖两个主要的任务队列：宏任务队列（Macro Task Queue） 和 微任务队列（Micro Task Queue）。

宏任务 包括：整体 script 代码、setTimeout、setInterval、I/O、UI 渲染等。
微任务 包括：Promise.then/catch/finally 回调、MutationObserver、queueMicrotask 等。

关键区别在于执行时机：

每次事件循环迭代中，只从宏任务队列中取出一个任务执行。
宏任务执行完后，会清空当前所有可执行的微任务。
微任务会“插队”，在当前宏任务结束后立即全部执行，不给其他宏任务机会。

事件循环执行流程

事件循环的基本流程如下：

从宏任务队列中取一个任务执行（如 script 主代码或 setTimeout 回调）。
执行过程中，遇到异步操作，将其回调注册到对应的任务队列（宏或微）。
当前宏任务执行完毕。
检查微任务队列，将所有可执行的微任务依次执行，直到清空。
进行 UI 渲染（如果需要）。
进入下一轮事件循环，取下一个宏任务。

举个例子帮助理解：

MarsCode

字节跳动旗下的免费AI编程工具

339 查看详情

console.log('1');

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

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

console.log('4');

输出顺序是：1 → 4 → 3 → 2

解释：

'1' 和 '4' 是同步代码，直接输出。
setTimeout 回调进入宏任务队列。
Promise.then 回调进入微任务队列。
当前宏任务（script）执行完后，优先执行微任务（输出 '3'）。
下一轮事件循环才执行 setTimeout 的回调（输出 '2'）。

实际开发中的注意事项

理解事件循环有助于避免一些常见的陷阱：

不要假设 setTimeout(fn, 0) 会立即执行，它至少要等当前所有同步和微任务完成。
大量微任务可能阻塞渲染，因为它们会在每个宏任务后被清空。
async/await 基于 Promise，其 await 后的代码相当于 then 回调，属于微任务。

例如：

async function async1() {
  console.log('A');
  await async2();
  console.log('B'); // 这部分是微任务
}
async function async2() {
  console.log('C');
}
console.log('D');
async1();
console.log('E');

输出为：D → A → C → E → B，因为 'B' 在 await 后，被包装成微任务执行。

基本上就这些。掌握事件循环，能更好理解 JS 的执行顺序，写出更可靠的异步代码。

以上就是J*aScript事件循环机制详解的详细内容，更多请关注其它相关文章！

J*aScript事件循环机制详解

发布时间：2025-10-22

点击量：

J*aScript 运行环境与执行栈

任务队列：宏任务与微任务

事件循环执行流程

实际开发中的注意事项

返回

J*aScript事件循环机制详解

发布时间：2025-10-22

点击量：

J*aScript 运行环境与执行栈

任务队列：宏任务与微任务

事件循环执行流程

实际开发中的注意事项

返回

4008988990