当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript事件循环解析及异步执行影响

JavaScript事件循环解析及异步执行影响

2026-02-09 13:05:30 0浏览收藏

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《JavaScript事件循环机制解析及异步执行顺序影响》，主要介绍了，希望对大家的知识积累有所帮助，快点收藏起来吧，否则需要时就找不到了！

JavaScript事件循环是单线程下异步任务调度的核心机制，由调用栈、宏任务队列和微任务队列协同工作；每轮执行一个宏任务后清空全部微任务，故Promise.then总先于setTimeout执行。

JavaScript事件循环是什么_它如何影响异步代码的执行顺序

JavaScript事件循环是单线程环境下处理异步任务的核心机制，它决定了代码何时执行、按什么顺序执行——尤其是setTimeout、Promise、用户交互等异步操作，看似“同时发生”，实则严格排队。

JS引擎运行时有三个关键部分协同工作：

调用栈（Call Stack）：同步代码逐行执行的地方，后进先出。遇到函数调用就压栈，返回就出栈。
宏任务队列（Macrotask Queue）：存放定时器回调（setTimeout、setInterval）、I/O 回调、setImmediate（Node.js）、UI 渲染任务等。
微任务队列（Microtask Queue）：存放 Promise.then/catch/finally、queueMicrotask()、MutationObserver 等回调。它的优先级高于宏任务。

事件循环每轮只执行一个宏任务，但会在该宏任务结束后，**清空整个微任务队列**（即连续执行所有当前积压的微任务），再取下一个宏任务。

因为 Promise.then 的回调进入微任务队列，而 setTimeout 进入宏任务队列。即使把 setTimeout 设为 0ms，它也要等当前宏任务 + 所有微任务执行完才轮到。

例如：

Promise.resolve().then(() => console.log('micro1'));
setTimeout(() => console.log('macro1'), 0);
Promise.resolve().then(() => console.log('micro2'));

输出一定是：micro1 → micro2 → macro1。

async 函数本质是语法糖，内部基于 Promise。每次遇到 await，后面的代码会被包装成微任务推入微任务队列。

await Promise.resolve() 后的语句，相当于 .then() 中的内容，属于微任务。
await new Promise(resolve => setTimeout(resolve, 0)) 则会等待下一轮宏任务，因为 setTimeout 是宏任务。

这解释了为什么多个 await 连续写，不会阻塞主线程，但执行时机仍受微任务调度约束。

误以为 setTimeout(0) 是“立刻执行”：它只是尽快安排进宏任务队列，前面可能还有大量微任务或长同步代码挡着。
在 Promise.then 里写大量同步逻辑，导致 UI 卡顿：虽然进了微任务队列，但它仍是在主线程同步执行的——微任务不是“多线程”，只是调度优先级高。
DOM 更新时机混乱：Promise.then 在渲染前执行；setTimeout 在渲染后（浏览器通常在宏任务之间做一次渲染）。想确保 DOM 已更新，可用 queueMicrotask 或 requestAnimationFrame（后者更接近渲染时机）。

理解事件循环不是为了背流程图，而是写出可预期、不掉链子的异步逻辑。

今天关于《JavaScript事件循环解析及异步执行影响》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！