如何使用带有 Promise 的 async/await 延迟 JavaScript 中的循环？

在 JavaScript 中，常常需要在循环中执行异步操作，比如从服务器获取数据或者执行耗时的计算任务。如果不正确地处理这些异步操作，可能会导致程序出现错误或者出现性能问题。

在 ES6 中引入的 Promise 对象，可以用来处理异步操作，而使用 async/await 结合 Promise，可以使异步任务更加直观和易于处理。本文将介绍如何使用带有 Promise 的 async/await 延迟 JavaScript 中的循环。

使用 Promise 和 async/await 实现延迟循环

下面是一个使用 Promise 和 async/await 实现延迟循环的示例：

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

async function delayedLoop(array, callback, interval) {
  for (let item of array) {
    await callback(item);
    await delay(interval);
  }
}

const array = [1, 2, 3];
async function logArrayItem(item) {
  console.log(item);
}
await delayedLoop(array, logArrayItem, 1000);

代码解释：

1. delay 函数接收一个时间参数 ms，返回一个 Promise，等待 ms 毫秒后返回一个 resolve 状态。
2. delayedLoop 函数接收三个参数：数组，回调函数和时间间隔。
3. 遍历数组中的每个元素，依次调用回调函数，并在回调函数执行完后等待指定的时间间隔。
4. logArrayItem 函数是一个简单的回调函数，用于打印数组中的元素。
5. 最后，我们使用 await delayedLoop 和上面定义的参数来执行循环。

实现限制并发的异步操作

有时候，我们需要限制异步操作的数量，以控制程序的资源使用情况和提高性能。下面是一个使用 Promise 和 async/await 实现限制并发的异步操作的示例：

async function limitConcurrent(max, items, asyncFn) {
  const results = [];
  const executing = [];
  for (const item of items) {
    const promise = asyncFn(item);
    results.push(promise);
    if (executing.length >= max) {
      await Promise.race(executing);
    }
    executing.push(promise);
    const index = executing.indexOf(promise);
    await promise.catch(() => {});
    executing.splice(index, 1);
  }
  return Promise.all(results);
}

const urls = ['url1', 'url2', 'url3', 'url4', 'url5'];

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function getData(url) {
  console.log(`Getting data from ${url}...`);
  await sleep(Math.random() * 2000 + 1000);
  console.log(`Got data from ${url}.`);
}

await limitConcurrent(2, urls, getData);

代码解释：

1. limitConcurrent 函数接收三个参数：最大并发数，一个包含异步操作的数组和一个异步操作函数。
2. 遍历数组中的每个元素，依次调用异步操作函数，并在执行器达到最大并发数时等待某个异步操作完成。
3. 使用 Promise.race 方法来等待执行器中某个异步操作完成。
4. 在执行器数组中添加执行异步操作的 Promise。
5. 等待异步操作完成，并抛弃错误。
6. 返回所有异步操作的 Promise。

结论

在本文中，我们介绍了如何使用 Promise 和 async/await 结合延迟循环和限制并发的异步操作。这些方法可以帮助我们更好地控制异步操作，提高性能和可维护性。