JavaScript通过事件循环实现异步非阻塞，执行顺序为：同步代码 → 微任务 → 宏任务；例如console.log(‘1’)、Promise.then、setTimeout(0)的输出顺序是1→4→3→2，因微任务在宏任务后立即清空。
JavaScript 是单线程语言，这意味着它同一时间只能处理一个任务。但现实中的应用往往需要处理异步操作，比如网络请求、定时器、用户交互等。为了解决异步执行的问题，JavaScript 引入了事件循环（Event Loop）机制，它是 JavaScript 实现非阻塞行为的核心。
JavaScript 运行环境与执行栈
JavaScript 代码在执行时，依赖于一个叫做调用栈（Call Stack）的结构。每当函数被调用，就会被推入栈顶；函数执行完毕后，从栈中弹出。这个过程是同步的，遵循“后进先出”原则。
例如：
function foo() {
console.log(“foo”);
}
function bar() {
foo();
}
bar(); // 调用顺序：bar → foo → 执行输出 → 弹出
但如果遇到异步操作，比如 setTimeout 或 fetch，它们不会立即执行回调，而是交由浏览器的其他模块处理，避免阻塞主线程。
立即学习“Java免费学习笔记（深入）”；
任务队列：宏任务与微任务
事件循环依赖两个主要的任务队列：宏任务队列（Macro Task Queue） 和 微任务队列（Micro Task Queue）。
宏任务 包括：整体 script 代码、setTimeout、setInterval、I/O、UI 渲染等。 微任务 包括：Promise.then/catch/finally 回调、MutationObserver、queueMicrotask 等。
关键区别在于执行时机：
每次事件循环迭代中，只从宏任务队列中取出一个任务执行。 宏任务执行完后，会清空当前所有可执行的微任务。 微任务会“插队”，在当前宏任务结束后立即全部执行，不给其他宏任务机会。
事件循环执行流程
事件循环的基本流程如下：
从宏任务队列中取一个任务执行（如 script 主代码或 setTimeout 回调）。 执行过程中，遇到异步操作，将其回调注册到对应的任务队列（宏或微）。 当前宏任务执行完毕。 检查微任务队列，将所有可执行的微任务依次执行，直到清空。 进行 UI 渲染（如果需要）。 进入下一轮事件循环，取下一个宏任务。
举个例子帮助理解：
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’）。
实际开发中的注意事项
理解事件循环有助于避免一些常见的陷阱：
不要假设 setTimeout(fn, 0) 会立即执行，它至少要等当前所有同步和微任务完成。 大量微任务可能阻塞渲染，因为它们会在每个宏任务后被清空。 async/await 基于 Promise，其 await 后的代码相当于 then 回调，属于微任务。
例如：
async function async1() {
console.log(‘A’);
await async2();
console.log(‘B’); // 这部分是微任务
}
async function async2() {
console.log(‘C’);
}
console.log(‘D’);
async1();
console.log(‘E’);
输出为：D → A → C → E → B，因为 ‘B’ 在 await 后，被包装成微任务执行。
基本上就这些。掌握事件循环，能更好理解 JS 的执行顺序，写出更可靠的异步代码。
以上就是JavaScript事件循环机制详解的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1531703.html
微信扫一扫 
支付宝扫一扫 
