本文介绍一种使用 async/await + setTimeout 实现非递归、非阻塞、定时执行的 for 循环方案，确保首次执行立即发生、后续迭代按固定间隔执行，避免栈溢出与主线程阻塞。
本文介绍一种使用 async/await + setTimeout 实现非递归、非阻塞、定时执行的 for 循环方案，确保首次执行立即发生、后续迭代按固定间隔执行，避免栈溢出与主线程阻塞。
在 JavaScript 中，若需模拟“每 X 毫秒执行一次”的循环逻辑（如轮询、动画帧控制或节流任务），直接使用传统 for 循环配合 setTimeout 或 setInterval 容易陷入回调地狱、作用域陷阱，或因递归调用引发潜在栈溢出风险。而用户提供的初始方案虽用 await 实现了顺序延迟，却错误地将 console.log 放在 setTimeout 回调内，导致首次输出被延迟 100ms——违背了“类 for 循环即刻启动”的语义。
✅ 正确解法的核心在于：每次迭代先同步执行业务逻辑，再 await 下一帧的延迟。如下所示：
(async () => {
for (let i = 0; i <= 30; i++) {
console.log("run number", i); // ✅ 立即执行第 i 次逻辑
await new Promise(resolve => setTimeout(resolve, 100)); // ⏳ 等待 100ms 后进入下一轮
}
})();该写法具备以下关键特性：
立即学习“Java免费学习笔记（深入）”；
- 非递归：完全基于 for 循环 + await，无函数自调用，杜绝调用栈持续增长；
- 非阻塞：await 暂停的是异步执行上下文，而非冻结主线程，UI 和其他任务可正常响应；
- 首帧即时：i = 0 时 console.log 立即触发，符合传统 for 循环“先执行后延迟”的直觉；
- 性能可控：每次仅创建一个微任务（Promise）和一个宏任务（setTimeout），开销极小；总耗时 ≈ (n + 1) × delay（含首次即刻执行）。
⚠️ 注意事项：
- 变量声明必须使用 let（而非 var），否则闭包中 i 值会全部为 31（因 var 提升+循环结束后的最终值）；
- 若需在循环中处理异步操作（如 API 请求），应将 await fetch(...) 置于 console.log 后、await new Promise(...) 前，确保请求发起时机可控；
- 避免在循环体内修改 i（如 i++ 或 i += 2），否则可能破坏预期迭代次数；如需动态控制，请改用 while + 显式条件判断。
此模式是现代 JavaScript 中实现“可控节奏循环”的推荐实践，兼顾可读性、健壮性与性能，在工具函数、状态轮询、游戏逻辑等场景中广泛适用。
