寒假生活指导 14

JavaScript 事件循环与异步机制解析

1. 单线程与事件循环
   JavaScript 是单线程语言，通过事件循环（Event Loop）处理异步任务，避免阻塞主线程。核心组成：
   调用栈：按顺序执行同步代码。
   任务队列：存放异步回调（如 setTimeout）。
   微任务队列：存放 Promise.then、MutationObserver 等高优先级任务。

2. 执行顺序规则
   同步代码优先执行（调用栈）。
   调用栈清空后，先清空微任务队列（所有微任务）。
   再执行任务队列中的一个宏任务（如 setTimeout）。
   重复循环。
   示例：
   console.log("1");
   setTimeout(() => console.log("2"), 0);
   Promise.resolve().then(() => console.log("3"));
   console.log("4");
   // 输出顺序：1 → 4 → 3 → 2

3. 宏任务 vs 微任务
   宏任务：setTimeout、setInterval、DOM 事件。
   微任务：Promise.then、async/await、queueMicrotask。
   微任务优先级更高，会在当前宏任务结束后立即执行。

4. async/await 的本质
   async 函数返回 Promise。
   await 会暂停代码执行，直到 Promise 完成，但不会阻塞主线程。
   async function demo() {
   await Promise.resolve();
   console.log("Async完成");
   }
   demo();

5. 常见误区
   setTimeout(fn, 0) 并非严格 0 毫秒：实际延迟至少 4ms（浏览器规范）。
   循环中的异步陷阱：
   for (var i = 0; i < 3; i++) {
   setTimeout(() => console.log(i), 0); // 输出 3, 3, 3
   }
   // 改用 let 或闭包解决作用域问题。
   总结：理解事件循环是掌握 JavaScript 异步编程的关键，它能避免代码阻塞，优化性能。进阶可探索 Web Workers 多线程或 Node.js 事件驱动模型！