在 JavaScript foreach 循环中添加延迟 - Javascript

在 JavaScript 中， forEach 是一个很方便的函数，可以用于遍历数组或类数组对象。然而在某些情况下，我们需要在 forEach 循环中添加一些延迟。这篇文章将介绍如何在 JavaScript forEach 循环中延迟执行代码。

延迟执行代码的常用方法

setTimeout

在 JavaScript 中， setTimeout 函数可以用来延迟执行代码。该函数接受两个参数，第一个参数是要执行的代码，第二个参数是延迟的时间，以毫秒为单位。

下面是一个使用 setTimeout 函数延迟执行代码的例子：

setTimeout(function() {
  console.log('延迟执行的代码');
}, 1000);

Promise

Promise 是 ES6 中引入的一个对象，它表示一个异步操作的最终完成或失败。它有三种状态：Pending（等待中）、Fulfilled（已完成）和 Rejected（已拒绝）。

下面是一个使用 Promise 延迟执行代码的例子：

new Promise(resolve => setTimeout(resolve, 1000))
  .then(() => console.log('延迟执行的代码'));

async/await

async/await 是 ES2017 中引入的一个特性，可以让我们更方便地使用 Promise。它将异步代码看作是同步代码，使得代码更易读、易维护。

下面是一个使用 async/await 延迟执行代码的例子：

async function delay() {
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log('延迟执行的代码');
}

delay();

在 forEach 循环中添加延迟的方法

使用 setTimeout

要在 forEach 循环中添加延迟，可以使用 setTimeout 函数。下面是一个使用 setTimeout 函数在 forEach 循环中延迟执行代码的例子：

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

array.forEach((item, index) => {
  setTimeout(() => {
    console.log(`延迟执行的代码 ${item}`);
  }, index * 1000);
});

在这个例子中，我们使用了 forEach 函数遍历数组，使用 setTimeout 函数在每个元素后延迟执行代码。我们使用了元素的索引值作为 setTimeout 函数延迟时间的一个乘数，以便每个元素的延迟时间增加。

使用 Promise

在 forEach 循环中，使用 Promise 可以更方便地添加延迟。下面是一个使用 Promise 在 forEach 循环中延迟执行代码的例子：

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

array.reduce((promise, item) => {
  return promise.then(() => {
    return new Promise(resolve => setTimeout(() => {
      console.log(`延迟执行的代码 ${item}`);
      resolve();
    }, 1000));
  });
}, Promise.resolve());

在这个例子中，我们使用了 reduce 函数遍历数组，并使用 Promise 在每个元素后延迟执行代码。我们使用了 Promise.resolve() 函数作为初始的 Promise 对象，并将其传递给 reduce 函数。在 reduce 函数中，我们将前面执行的 Promise 对象与当前元素的 Promise 对象合并，以便前面的 Promise 对象执行完成后才执行当前元素的 Promise 对象。

使用 async/await

使用 async/await 可以让代码更易读、易维护。下面是一个使用 async/await 在 forEach 循环中延迟执行代码的例子：

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

async function delay() {
  for (const item of array) {
    await new Promise(resolve => setTimeout(() => {
      console.log(`延迟执行的代码 ${item}`);
      resolve();
    }, 1000));
  }
}

delay();

在这个例子中，我们使用了 async/await，使代码更易读、易维护。我们使用 for...of 循环遍历数组，并使用 await 关键字等待每个元素的 Promise 对象执行完成。在每个元素的 Promise 对象中，我们使用 setTimeout 函数来延迟执行代码，并在 Promise 对象执行完成后调用 resolve 函数。