关键在于理清任务优先级与执行时序：微任务（如Promise.then）在当前宏任务结束后立即执行，宏任务（如setTimeout）需等待当前宏任务及所有微任务完成；渲染为独立宏任务，受帧率限制；应利用微任务同步状态、拆解异步链、避免微任务无限循环。
处理 JavaScript 事件循环中的异步依赖，关键不是“等它快点”，而是理清任务优先级、控制执行时序、避免隐式同步假象。很多 bug（比如跳转后拿不到最新数据、setState 立即读不到新值）其实源于对微任务/宏任务调度时机的误判。
明确任务类型与执行顺序
异步依赖能否“链上”后续逻辑，取决于它落在哪个队列：
- Promise.then / async/await 的回调属于微任务：当前宏任务（如点击事件、脚本执行块）一结束，立刻清空所有微任务队列，再进入下一个宏任务
- setTimeout、fetch 回调、DOM 事件属于宏任务：要排队等当前宏任务 + 所有微任务执行完，才轮到它
- 渲染（paint）是独立宏任务：浏览器通常在每个宏任务结束后尝试更新 UI，但不保证立即——它受帧率（60fps）限制，且可能被批处理或跳过
用微任务确保状态同步更新
当需要在异步操作完成后、视图更新前做状态整理（比如合并多个响应、格式化数据），微任务是最可靠的“中间站”：
- 用
Promise.resolve().then(() => {...})或queueMicrotask(() => {...})把逻辑塞进本轮微任务末尾 - 在 Vue 中可借助
nextTick()（本质是微任务封装），确保 DOM 更新后执行 - 在 React 中，
useEffect的清理函数和副作用本身都发生在微任务之后、渲染之前，适合做收尾校验
拆解“看似同步”的操作链
像 router.push() + fetch() + setState() 这类组合，表面线性，实则横跨三类时机：
立即学习“Java免费学习笔记（深入）”；
-
router.push()是同步的（改 history、发 popstate） -
fetch()立即返回 Promise，但响应体进入微任务队列 -
setState()是异步批处理，触发 re-render，但真实 DOM 变更要等到下一轮渲染宏任务 - 若需强顺序，应把后续逻辑写在
fetch().then()内，而非紧贴调用后写
警惕微任务无限循环
在微任务中又创建新微任务（比如递归调用 queueMicrotask 或不断 resolve Promise），会阻塞渲染和后续宏任务，导致页面卡死：
- 避免在
Promise.then中无条件触发另一个Promise.then - 批量操作尽量用数组一次性处理，而不是逐个
.then链式推进 - 必要时用
setTimeout(..., 0)降级到宏任务，让出主线程控制权
