JavaScript事件循环先执行同步代码，再清空微任务队列，最后执行宏任务；例如，Promise.then（微任务）在setTimeout（宏任务）前执行，因每次宏任务执行后需清空所有微任务。
JavaScript的事件循环机制是理解其异步编程模型的核心。很多人知道setTimeout、Promise、async/await能实现异步操作，但不清楚它们执行顺序背后的原理。关键就在于事件循环（Event Loop）如何协调调用栈、任务队列和微任务队列。
JavaScript单线程与异步的矛盾
JavaScript是一门单线程语言，意味着同一时间只能执行一个任务。如果遇到耗时操作（如网络请求、定时器），阻塞主线程会导致页面卡顿。为解决这个问题，JavaScript引入了事件循环机制，通过非阻塞方式处理异步任务。
浏览器或Node.js环境提供了Web API（如DOM操作、setTimeout、fetch等），这些API在后台执行异步操作，完成后将回调函数推入任务队列，由事件循环决定何时执行。
宏任务与微任务：任务分类
事件循环中，任务分为两类：宏任务（Macro Task）和微任务（Micro Task）。它们的执行优先级不同，直接影响代码执行顺序。
立即学习“Java免费学习笔记（深入）”；
常见宏任务包括：整体代码 script setTimeout 回调 setInterval 回调 I/O 操作 UI 渲染常见微任务包括：Promise.then/catch/finally 回调 MutationObserver queueMicrotask() process.nextTick（Node.js）
每次事件循环迭代中，先执行当前调用栈中的同步代码，然后清空微任务队列（所有可用微任务），再取一个宏任务执行。这个过程不断重复。
执行顺序实例解析
看一个经典例子，理解宏任务与微任务的执行优先级：
console.log(‘start’);
setTimeout(() => console.log(‘timeout’), 0);
Promise.resolve().then(() => console.log(‘promise’));
console.log(‘end’);
输出顺序是：start → end → promise → timeout
原因如下：
“start” 是同步代码，立即输出 setTimeout 被放入宏任务队列 Promise.then 被放入微任务队列 “end” 是同步代码，立即输出 同步代码执行完毕，事件循环检查微任务队列，执行 Promise 回调，输出 “promise” 微任务清空后，取出一个宏任务（setTimeout），输出 “timeout”
事件循环完整流程
一次完整的事件循环大致经历以下步骤：
执行全局脚本，同步任务入栈并执行 遇到异步操作，交由 Web API 处理，完成后根据类型放入对应队列 同步代码执行完毕，检查微任务队列，逐个执行直到清空 从宏任务队列中取出一个任务执行 执行过程中产生的微任务加入微任务队列，本轮循环末尾继续清空 重复以上过程
注意：每个宏任务执行完后，都会清空当前所有的微任务，这是理解 async/await 行为的关键。
基本上就这些。掌握事件循环，你就明白了为什么Promise比setTimeout先执行，也就能写出更可靠的异步逻辑。不复杂但容易忽略细节。
以上就是深入理解JavaScript事件循环机制_javascript核心的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1538558.html
微信扫一扫 
支付宝扫一扫 
