JS for循环setTimeout问题：实现迭代间延迟逐次输出

你的原代码问题在于：for循环是同步执行的，会在瞬间完成所有迭代——每一次循环都会立刻执行console.log，然后设置一个空回调的setTimeout。所有console.log会一次性输出，而setTimeout只是在后台等待，因为回调没做任何事，所以你看不到延迟后的后续操作。

下面是几种可行的解决方案：

方案1：使用async/await（最直观） #

先封装一个返回Promise的延迟函数，然后在async函数里用for循环配合await，让每次迭代等待延迟结束后再继续：

// 封装延迟函数
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// 带延迟的循环
async function runDelayedLoop() {
  for (let i = 0; i < 10; i++) {
    console.log("index: " + i);
    // 等待指定时长（替换成你实际的延迟时间）
    await delay(coffeeMachine.shoppingCard.list[i].time * 1000);
  }
}

// 启动循环
runDelayedLoop();

await会暂停当前循环，直到延迟的Promise完成，完美实现「输出→等待→输出」的顺序。

方案2：递归调用（无需async/await） #

用递归代替for循环，每次输出后通过setTimeout触发下一次迭代：

function loopWithDelay(i = 0) {
  // 终止条件：当i达到10时停止
  if (i >= 10) return;
  
  console.log("index: " + i);
  // 延迟后执行下一次递归
  setTimeout(() => {
    loopWithDelay(i + 1);
  }, coffeeMachine.shoppingCard.list[i].time * 1000);
}

// 启动递归循环
loopWithDelay();

这种方式通过递归的调用链，确保每次输出后等待指定时间，再进行下一次输出。

方案3：累加延迟时间（一次性安排所有定时器） #

如果不想用async/await或递归，可以计算每个输出的总延迟时间，一次性设置所有setTimeout：

let totalDelay = 0;
// 生成0-9的数组并遍历
[...Array(10).keys()].forEach(i => {
  const currentDelay = coffeeMachine.shoppingCard.list[i].time * 1000;
  setTimeout(() => {
    console.log("index: " + i);
  }, totalDelay);
  // 累加延迟时间，让下一个输出在当前延迟结束后执行
  totalDelay += currentDelay;
});

这种方式的本质是提前计算每个输出的触发时间，所有定时器在一开始就被注册，但触发时间依次错开，也能达到预期效果。

内容的提问来源于stack exchange，提问作者user18227353