掌控异步：用 JavaScript 循环等待的艺术

闲谈

2024-01-28 08:33:10

当处理 JavaScript 中的异步操作时，有时需要在循环中等待。本文将介绍如何使用 for..of 循环和 await 实现这一目标，并提供代码示例以帮助您理解。

理解异步编程

在 JavaScript 中，异步操作是不会立即执行的操作。它们将在稍后执行，通常是在调用异步函数或方法时。典型的异步操作包括网络请求、文件读取和超时。

使用 for..of 循环等待

for..of 循环是一种用于遍历数组、字符串或类似对象的可迭代对象的语法糖。它在 JavaScript 中很常见，因为它提供了简洁且易于使用的遍历机制。

要使用 for..of 循环在循环中等待，您需要将循环放在一个异步函数中。此异步函数可以是带有 async 关键字的常规函数，也可以是 async/await 语法的一部分。

以下代码示例演示了如何使用 for..of 循环在循环中等待：

async function waitForLoop() {
  const array = [1, 2, 3, 4, 5];

  for (const item of array) {
    await new Promise((resolve) => setTimeout(resolve, 1000));
    console.log(item);
  }
}

waitForLoop();

在这个示例中，waitForLoop 函数是一个异步函数，其中包含 for..of 循环。循环通过数组，但使用 await 关键字暂停每个循环迭代。await 关键字使 JavaScript 引擎暂停执行，直到正在等待的 Promise 解决。在我们的示例中，我们正在使用 setTimeout 创建一个 Promise，它会在 1 秒后解决。

这允许我们在循环中等待，直到每个数组项的延迟完成。输出将如下所示：

使用 for...in 循环等待

您还可以使用 for...in 循环在循环中等待，但此语法已过时，不推荐使用。它与 for..of 循环类似，但用于遍历对象的属性。

以下是使用 for...in 循环在循环中等待的代码示例：

async function waitForLoop() {
  const object = { a: 1, b: 2, c: 3 };

  for (const property in object) {
    await new Promise((resolve) => setTimeout(resolve, 1000));
    console.log(property);
  }
}

waitForLoop();