如何在 JavaScript 循环中添加延迟？

有时候我们需要在一段时间内逐个执行一段代码，而不是一次性执行完成。在 JavaScript 中，我们可以使用定时器(setTimeout)来实现。在本文中，我们将介绍如何在 JavaScript 循环中添加延迟。

1. 使用setTimeout()函数

setTimeout()函数可以在一定的时间后执行一段代码。我们可以使用它来给循环中的代码添加延迟。

首先，我们需要将循环中需要执行的代码转换为一个函数，然后将这个函数作为setTimeout()的参数。同时，我们需要设置一个延迟时间，以确保每次循环都会等待一段时间后再执行。

下面是一个示例代码：

const arr = [1, 2, 3, 4, 5];

function delayedLog(item, delay) {
  setTimeout(() => {
    console.log(item);
  }, delay);
}

for (let i = 0; i < arr.length; i++) {
  delayedLog(arr[i], i * 1000);
}

上面的代码使用了一个名为delayedLog()的函数来执行console.log()，并在每次循环中使用setTimeout()函数为其添加延迟。延迟时间等于当前循环次数乘以1000（即每个元素之间相隔1秒）。

2. 使用async/await关键字

另一种方式是使用ES2017中的async/await关键字。这种方式会等待前一个任务完成后再执行下一个任务，从而实现循环中添加延迟的效果。

下面是一个示例代码：

const arr = [1, 2, 3, 4, 5];

async function delayedLog(item, delay) {
  await new Promise(resolve => setTimeout(resolve, delay));
  console.log(item);
}

async function processArray(array) {
  for (const item of array) {
    await delayedLog(item, 1000);
  }
}

processArray(arr);

上面的代码使用了async/await关键字来创建了一个名为delayedLog()的异步函数，并在循环中使用它来为每个元素添加了1秒的延迟。

结论

以上是两种在 JavaScript 循环中添加延迟的方式：通过使用setTimeout()函数或async/await关键字。它们分别适用于不同的应用场景，具体使用时需要根据情况进行选择。