JavaScript事件循环机制完全解析_javascript核心-js教程-PHP中文网

JavaScript事件循环机制完全解析_javascript核心

betcha

发布： 2025-11-04 21:58:02

原创

677人浏览过

事件循环先执行同步代码，再处理异步任务。1. 同步任务依次执行，输出 start 和 end；2. setTimeout 回调进入宏任务队列；3. Promise.then 回调进入微任务队列；4. 当前宏任务结束，清空微任务队列，输出 promise；5. 下一轮事件循环执行宏任务，输出 timeout。宏任务包括 script、setTimeout、I/O 等，微任务包括 Promise.then、queueMicrotask 等。每次事件循环先执行一个宏任务，再清空所有微任务，然后进行 UI 渲染（浏览器）。理解该机制可避免对异步行为的误解，如 setTimeout(0) 并非立即执行，Vue 的 nextTick 利用微任务确保 DOM 更新前回调。

javascript事件循环机制完全解析_javascript核心

JavaScript的事件循环（Event Loop）机制是理解其异步编程模型的核心。很多人在使用setTimeout、Promise或async/await时，只知道它们能实现“延迟执行”或“非阻塞”，但不清楚背后是如何调度的。要真正掌握JavaScript的运行逻辑，必须深入事件循环的工作原理。

JavaScript单线程与异步的矛盾

JavaScript是一门单线程语言，意味着同一时间只能执行一个任务。但浏览器环境需要处理用户交互、网络请求、定时器等耗时操作，如果这些操作都同步阻塞，页面将无法响应。

为解决这个问题，JavaScript引入了事件循环 + 任务队列的机制，通过异步回调的方式实现“看似并发”的效果。

关键点在于：所有同步代码先执行，异步任务被挂起，等到条件满足后，将其回调函数推入任务队列，由事件循环决定何时执行。

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

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

事件循环并非只维护一个队列，而是区分了宏任务（Macrotask）和微任务（Microtask）。

常见的宏任务包括：

整体script代码
setTimeout/setInterval 回调
I/O 操作（如Ajax）
UI渲染（浏览器层面）
setImmediate（Node.js）

常见的微任务包括：

Promise.then/catch/finally 回调
MutationObserver（DOM变化监听）
queueMicrotask()
process.nextTick（Node.js）

执行顺序规则是：每次事件循环迭代，先执行一个宏任务，然后清空所有当前微任务队列，再进入下一个宏任务。

事件循环执行流程详解

以一段典型代码为例，说明事件循环如何工作：

文心大模型

百度飞桨-文心大模型 ERNIE 3.0 文本理解与创作

查看详情

console.log('start');

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

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

console.log('end');

登录后复制

输出顺序是：start → end → promise → timeout。

原因如下：