在宏任务间插入逻辑应使用setTimeout(0)或requestAnimationFrame；在宏任务内部插入微任务则用Promise.resolve().then()或queueMicrotask()；执行顺序取决于任务类型与投递时机，而非代码书写位置。

在宏任务执行周期中插入逻辑，核心不是“打断”事件循环，而是利用宏任务与微任务的天然调度节奏，在恰当的位置安排代码执行。关键在于理解：每个宏任务结束后，引擎会立即清空当前所有微任务，之后才取下一个宏任务；而你写的同步代码、Promise.then、setTimeout 等，本质上就是在往这两个队列里“投递”任务。

在宏任务之间插入逻辑：用 setTimeout(0) 或 requestAnimationFrame

这是最常用也最可靠的方式——把要插入的逻辑包装成一个新的宏任务，让它排队等待当前轮次结束。

• setTimeout(fn, 0)：将回调推入宏任务队列尾部，等本轮所有同步代码 + 微任务执行完后，再执行它
• requestAnimationFrame(fn)：适合与 UI 相关的插入逻辑（如动画帧前更新状态），浏览器会在下一次重绘前调用，时机比 setTimeout(0) 更精准
• 注意：浏览器对 setTimeout(0) 有最小延迟限制（通常 ≥4ms），实际执行时间可能略晚于预期

在宏任务内部插入微任务：用 Promise.resolve().then() 或 queueMicrotask()

如果你希望插入的逻辑紧接在当前宏任务的同步部分之后、但早于下一个宏任务，就该用微任务。

• Promise.resolve().then(fn)：兼容性好，几乎所有环境都支持
• queueMicrotask(fn)：更语义化、无 Promise 构造开销，推荐用于纯调度场景（现代浏览器和 Node.js ≥12.0 支持）
• 微任务会排队到当前宏任务的微任务队列尾部，且本轮一定会全部执行完，不会被中间插入的其他宏任务打断

避免常见陷阱：别误以为“写在中间=执行在中间”

JavaScript 不会因为你把代码写在两行 setTimeout 之间，就让它在它们中间执行。执行顺序完全由任务类型和投递时机决定：

• 同步代码（console.log、变量赋值等）总是在当前宏任务开头到结尾之间执行
• new Promise(executor) 中的 executor 是同步执行的，但 .then 回调一定是微任务
• 多个 setTimeout 即使 delay 都是 0，也可能因宿主调度策略产生微小顺序差异，不建议依赖其绝对先后

实战小技巧：模拟“分步执行”或“让出主线程”

当一段计算密集型逻辑可能阻塞页面响应时，可主动拆成多个微任务或宏任务，给浏览器喘息机会：

• 用 queueMicrotask 拆解轻量操作（如状态更新、小批量 DOM 修改）
• 用 setTimeout(..., 0) 拆解中等耗时任务（如处理几百条数据），确保 UI 可响应
• 对超长列表，考虑结合 requestIdleCallback（若需更高精度控制空闲时段）