Event Loop通过宏任务与微任务协调异步执行，同步代码先运行，随后清空微任务队列再执行宏任务，如：console.log(‘1’)、’4’同步输出，Promise.then入微任务队列输出’3’，setTimeout入宏任务队列最后输出’2’，形成1→4→3→2顺序；微任务优先级高于宏任务，process.nextTick在Node中优先于Promise。
Event Loop 是 JavaScript 实现异步非阻塞编程的核心机制。由于 JavaScript 是单线程语言，它通过 Event Loop 协调同步代码、异步任务和回调执行顺序，从而在不阻塞主线程的前提下处理耗时操作。
理解 Event Loop 的基本构成
JavaScript 的运行环境包含以下几个关键部分：
调用栈（Call Stack）：记录当前正在执行的函数调用。 堆（Heap）：存放对象等动态数据。 任务队列（Task Queue）：存放宏任务（macro task），如 setTimeout、DOM 事件、I/O 操作等。 微任务队列（Microtask Queue）：存放微任务（micro task），如 Promise.then、queueMicrotask、MutationObserver 等。
Event Loop 不断检查调用栈是否为空，一旦为空，就从微任务队列中取出第一个任务执行，直到微任务队列清空，然后进入下一轮事件循环处理宏任务。
宏任务与微任务的执行优先级
代码执行顺序的关键在于区分宏任务和微任务：
每个宏任务执行完毕后，Event Loop 会立即清空当前所有微任务。 微任务具有更高优先级，会在本次循环内全部执行完，不会让出主线程。
常见任务分类：
宏任务（Macro Tasks）：setTimeout、setInterval、setImmediate（Node.js）、I/O、UI 渲染、script 标签整体代码块。
微任务（Micro Tasks）：Promise.then/catch/finally、queueMicrotask、process.nextTick（Node.js）、MutationObserver。
示例帮助理解执行顺序：
console.log('1');setTimeout(() => { console.log('2');}, 0);Promise.resolve().then(() => { console.log('3');});console.log('4');
输出顺序是：1 → 4 → 3 → 2。原因如下：
同步代码 ‘1’ 和 ‘4’ 先执行。 setTimeout 加入宏任务队列。 Promise.then 加入微任务队列。 当前宏任务（script）结束后，先执行微任务（’3’），再进入下一轮事件循环执行 setTimeout（’2’）。
如何精准控制代码执行顺序
要准确预测和控制执行流程，关键是合理安排任务类型：
需要“延迟但尽快”执行的操作使用微任务，比如 Promise.then 或 queueMicrotask。 希望“稍后执行、不抢占当前逻辑”的任务使用宏任务，如 setTimeout(fn, 0)。 避免在微任务中无限触发新微任务，可能导致饥饿问题（其他任务无法执行）。
例如，想让某个回调在当前所有同步和异步微任务之后执行，可使用 setTimeout：
queueMicrotask(() => console.log('micro1'));Promise.resolve().then(() => console.log('micro2'));setTimeout(() => console.log('macro1'), 0);
输出：micro1 → micro2 → macro1，因为两个微任务都在 setTimeout 前被执行。
在 Node.js 中还需注意 process.nextTick 的优先级高于 Promise：
process.nextTick(() => console.log('nextTick'));Promise.resolve().then(() => console.log('promise'));
输出：nextTick → promise，因 nextTick 属于微任务中的最高优先级队列（Node 特有）。
基本上就这些。掌握任务分类和执行时机，就能准确预判 JavaScript 的执行顺序。不复杂但容易忽略细节。
以上就是如何理解Event Loop机制并对代码执行顺序进行精准控制？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1526057.html
微信扫一扫 
支付宝扫一扫 
