深入浅出JavaScript_事件循环机制

JavaScript通过事件循环实现异步，核心是宏任务与微任务的执行顺序：先执行同步代码，再清空微任务队列，最后进入下一个宏任务。例如setTimeout为宏任务，Promise.then为微任务，故输出为start、end、promise、timeout。

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

执行栈与任务队列

JavaScript 的代码执行依赖于执行栈（Call Stack）。每当函数被调用，就会被推入栈中；函数执行完毕后，从栈中弹出。这是同步代码的执行方式。

当遇到异步操作（如 setTimeout、Promise、DOM 事件）时，这些任务不会立即执行，而是被交给浏览器的其他模块（如定时器模块、网络模块）处理。完成后，它们会被放入任务队列（Task Queue）中等待执行。

事件循环的作用就是持续监控执行栈和任务队列。当执行栈为空时，事件循环会从任务队列中取出第一个回调函数，推入执行栈中执行。

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

宏任务与微任务

事件循环的任务分为两类：宏任务（Macro Task）和微任务（Micro Task）。

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

执行顺序规则如下：

• 先执行当前宏任务中的同步代码。
• 同步代码执行完后，检查是否有微任务。如果有，依次执行所有微任务。
• 微任务全部执行完后，本轮事件循环结束，进入下一轮宏任务。

举例说明：

Revid AI

AI短视频生成平台

62

查看详情

输出顺序是：start → end → promise → timeout。因为 Promise 的 then 是微任务，在当前宏任务结束后立即执行；而 setTimeout 是宏任务，要等到下一轮事件循环。

事件循环的实际流程

一次完整的事件循环流程如下：

• 执行全局脚本，这是一个宏任务。
• 执行过程中遇到异步操作，将其回调注册到对应的任务队列。
• 同步代码执行完毕，执行所有当前可用的微任务。
• 微任务清空后，事件循环进入下一个宏任务（如 setTimeout 回调、新的事件等）。
• 重复上述过程。

这个机制保证了高优先级的微任务（如 Promise 回调）能尽快执行，而不被新的宏任务阻塞。

常见误区与注意事项

很多人误以为 setTimeout 设置为 0 就能立即执行，其实不然。它只是表示“至少延迟 0 毫秒”，实际执行时间取决于事件循环的状态。如果前面有大量任务，它仍会被推迟。

另一个常见问题是嵌套 Promise 链。由于每个 .then 都是微任务，它们会在当前宏任务结束后连续执行，不会被中断，这保证了异步逻辑的连贯性。

理解事件循环有助于避免回调地狱、正确处理异步流程、优化性能问题。

基本上就这些。事件循环看似复杂，核心逻辑却很清晰：执行栈空了，就从微任务队列取任务，清空微任务后，再取下一个宏任务。掌握这一点，就能更好理解 JavaScript 的异步行为。不复杂但容易忽略。

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