深入理解J*aScript事件循环机制_j*ascript核心

J*aScript事件循环先执行同步代码，再清空微任务队列，最后执行宏任务；例如，Promise.then（微任务）在setTimeout（宏任务）前执行，因每次宏任务执行后需清空所有微任务。

深入理解javascript事件循环机制_javascript核心

J*aScript的事件循环机制是理解其异步编程模型的核心。很多人知道setTimeout、Promise、async/await能实现异步操作，但不清楚它们执行顺序背后的原理。关键就在于事件循环（Event Loop）如何协调调用栈、任务队列和微任务队列。

J*aScript是一门单线程语言，意味着同一时间只能执行一个任务。如果遇到耗时操作（如网络请求、定时器），阻塞主线程会导致页面卡顿。为解决这个问题，J*aScript引入了事件循环机制，通过非阻塞方式处理异步任务。

浏览器或Node.js环境提供了Web API（如DOM操作、setTimeout、fetch等），这些API在后台执行异步操作，完成后将回调函数推入任务队列，由事件循环决定何时执行。

事件循环中，任务分为两类：宏任务（Macro Task）和微任务（Micro Task）。它们的执行优先级不同，直接影响代码执行顺序。

常见宏任务包括：

常见微任务包括：

每次事件循环迭代中，先执行当前调用栈中的同步代码，然后清空微任务队列（所有可用微任务），再取一个宏任务执行。这个过程不断重复。

看一个经典例子，理解宏任务与微任务的执行优先级：

Tanka

具备AI长期记忆的下一代团队协作沟通工具

146 查看详情 Tanka

console.log('start');
setTimeout(() => console.log('timeout'), 0);
Promise.resolve().then(() => console.log('promise'));
console.log('end');

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

原因如下：

一次完整的事件循环大致经历以下步骤：

注意：每个宏任务执行完后，都会清空当前所有的微任务，这是理解 async/await 行为的关键。

基本上就这些。掌握事件循环，你就明白了为什么Promise比setTimeout先执行，也就能写出更可靠的异步逻辑。不复杂但容易忽略细节。

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