循环遍历数组时在数组中的每个项目之间添加延迟

Question

我有一个被调用的异步函数，它遍历数组并为每个项目调用一个函数。

在这个例子中，函数正在访问一个 API 端点，我需要等待一个项目完成，然后再移动到下一个。

但是，当前发生的情况是每个函数都在大致相同的时间被调用，这导致 api 响应出现问题。所以我需要在每个请求之间等待 1 秒。

这是我目前拥有的

const delayedLoop = async () => {
  const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

  const myAsyncFunc = async (i) => {
    console.log(`item ${i}`);
    await delay(0);
    return true;
  };

  const arr = ['one', 'two', 'three'];

  const promises = arr.map(
    (_, i) =>
      new Promise((resolve) =>
        setTimeout(async () => {
          await myAsyncFunc(i);
          resolve(true);
        }, 1000),
      ),
  );
  return Promise.all(promises);
}

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

myFunc();

会发生什么；

• 日志START
• 等待 1 秒
• 将所有item ${i} 一起记录（中间没有延迟）
• 立即记录FINISH

我想要发生的是

• 日志START
• 等待 1 秒
• 日志item 1
• 等待 1 秒
• 日志item 2
• 等待 1 秒
• 日志item 3
• 立即记录FINISH

查看JSFiddle 以了解它的实际应用

Answer 1

你可以这样做，就像这样，使用一个简单的 for 循环：

const delayedLoop = async () => {
  const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

  const myAsyncFunc = async (i) => {
    console.log(`item ${i}`);
    return true;
  };

  const arr = ['one', 'two', 'three'];
  for(let i=0; i < arr.length; i++) {
     await myAsyncFunc(i);
     await delay(1000);
  }
}

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

myFunc();