异步遍历数组时为每个元素调用添加1秒间隔延迟的技术实现问题

我明白你的需求——你希望数组里的每个元素能依次处理，每处理完一个就等1秒再处理下一个，而不是现在这样所有请求同时触发。咱们先看看你当前代码的问题出在哪，再给出修复方案。

为什么当前代码达不到预期？ #

你用arr.map配合setTimeout创建了一堆Promise，但这些setTimeout是同时启动计时的。也就是说，当delayedLoop执行时，三个setTimeout会同时开始倒数1秒，1秒后所有的myAsyncFunc会一起执行，这就是为什么你会看到所有item同时打印。而Promise.all会等所有Promise完成后立刻返回，所以紧接着就打印FINISH了。

修复方案：用for循环配合await实现串行执行 #

要实现逐个处理并间隔1秒，咱们可以用普通的for循环（或for...of）和await搭配，这样就能确保上一个元素处理完成后，再等待1秒才开始下一个元素的处理。

修改后的完整代码如下：

const delayedLoop = async () => {
  const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
  const myAsyncFunc = async (i) => {
    console.log(`item ${i+1}`); // 把索引转成你期望的1、2、3格式
    // 这里替换成你实际的API调用逻辑
    return true;
  };
  const arr = ['one', 'two', 'three'];

  // 先等待1秒，对应你期望的START后的等待
  await delay(1000);

  // 逐个处理数组元素
  for (let i = 0; i < arr.length; i++) {
    await myAsyncFunc(i);
    // 只有不是最后一个元素时，才等待1秒（避免最后一个处理完多等1秒）
    if (i !== arr.length - 1) {
      await delay(1000);
    }
  }
}

const myFunc = async () => {
  console.log('START');
  await delayedLoop();
  console.log('FINISH');
}

myFunc();

执行效果说明 #

运行这段代码后，会严格按照你期望的顺序执行：

1. 打印START
2. 等待1秒
3. 打印item 1
4. 等待1秒
5. 打印item 2
6. 等待1秒
7. 打印item 3
8. 立即打印FINISH

这个方案的核心是利用await阻塞循环的执行，直到当前的异步操作（包括延迟）完成，再进入下一次循环，完美实现了串行+间隔的需求。

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