JavaScript事件循环机制详解

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

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

JavaScript 运行环境与执行栈

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

例如：

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

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

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

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

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

关键区别在于执行时机：

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

事件循环执行流程

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

灵机语音

灵机语音

56

查看详情

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

举个例子帮助理解：

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

解释：

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

实际开发中的注意事项

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

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

例如：

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

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

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