🔥 以龙息淬炼代码，在时光灰烬中重铸技术星河 ！
欢迎来到
晷龙烬的博客小窝✨！ 这里记录技术学习点滴，分享实用技巧，偶尔聊聊奇思妙想～原创内容✍️，转载请注明出处～感谢支持❤️！请尊重原创📩！ 欢迎在评论区交流🌟！
引言
想象你在食堂打饭：同步任务是立刻能打的菜，异步任务是要等的特色窗口。而 事件循环就是那个维持排队秩序的保安，确保所有人（代码）按规矩吃饭（执行）！今天咱们就掰开揉碎聊聊这事儿～
一、事件循环是啥？
简单说：JS是单线程的，一次只能干一件事。但网页操作（点击、加载）那么多，咋办？事件循环的妙招就是：
- 同步任务立刻执行（比如
console.log("饿！")） - 异步任务丢进队列（比如
setTimeout(买饭, 1000)） - 队列按优先级处理（就像VIP通道和普通队伍）
💡 关键点：任务分两种队伍
- 宏任务队（普通窗口）：
script整体代码、setTimeout、点击事件- 微任务队（VIP窗口）：
Promise.th en()、MutationObserver规则：每执行1个宏任务，就要清空整个微任务队！
二、看个真实排队案例
console.log("1. 冲进食堂"); // 同步任务，立刻执行
setTimeout(() => {
console.log("4. 最后吃炸鸡"); // 宏任务，进普通队
}, 0);
Promise.resolve().then(() => {
console.log("3. 先喝奶茶！"); // 微任务，进VIP队
});
console.log("2. 排队中"); // 同步任务，立刻执行
输出顺序：
1. 冲进食堂
2. 排队中
3. 先喝奶茶！
4. 最后吃炸鸡
为啥？
- 先跑完所有同步代码（输出1和2）
- 清空微任务队：发现VIP通道的Promise，输出3
- 再执行宏任务队：0秒到点的setTimeout，输出4
🚨 重点：微任务插队能力超强！ 即使
setTimeout(0)说“立刻执行”，也得等微任务清空。
三、循环流程
主线程 → 微任务清空 → 宏任务取1个 → 微任务清空 → 循环...
口诀记住：
“同微宏，微宏”
- 同（同步代码）
- 微（清空微任务）
- 宏（执行1个宏任务）
- 回到第2步微，开启循环！
结语
事件循环就像代码世界的交通指挥：
- 同步任务是绿灯直行
- 微任务是救护车优先
- 宏任务是普通车排队 掌握这套规则，复杂代码顺序再也不会懵圈啦！
✨ 动手试试： 在浏览器运行文中的例子，调整
setTimeout和Promise位置，感受顺序变化！
—— 完 ——
✨ 至此结束 ✨
💡 点赞关注，解锁更多技术干货！
我是 晷龙烬 期待与你的下次相遇～
