不会打印多个

2024-01-16 23:17:32

异步循环：掌握 async/await 中的循环奥秘

引言

在现代 JavaScript 中，async/await 是一种强大的工具，可帮助我们处理异步操作。但是，当我们在 async 函数中使用循环时，它有时可能会导致一些意想不到的行为。本文将深入探讨 async/await 中循环的问题，并提供一些实用的解决方案。

问题：异步循环的诡异现象

让我们从一个使用 for 循环的简单例子开始：

async function printNumbers() {
  for (let i = 1; i <= 5; i++) {
    console.log(i);
    await new Promise((resolve) => setTimeout(resolve, 1000));
  }
}

printNumbers();

你会期望这段代码每隔一秒打印一个数字，从 1 到 5。但当你运行它时，你可能会惊讶地发现它一次性打印出所有数字。这是怎么回事？

原因：异步执行

问题在于，在 async 函数中使用循环时，循环体内的代码是异步执行的。这意味着当你调用 await new Promise 时，JavaScript 引擎会暂停当前执行，转而执行事件循环中的其他任务。当 setTimeout 函数完成后，JavaScript 引擎会恢复当前执行并继续循环体中的下一行代码。

解决方案：同步和异步循环

有几种方法可以解决这个问题：

1. 传统 for 循环和 setTimeout：

function printNumbers() {
  for (let i = 1; i <= 5; i++) {
    setTimeout(() => {
      console.log(i);
    }, i * 1000);
  }
}

printNumbers();

这种方法使用 setTimeout 函数来延迟循环体代码的执行，从而确保它们按预期逐个执行。

2. async/await 和 for-await-of 循环：

async function printNumbers() {
  for await (const i of [1, 2, 3, 4, 5]) {
    console.log(i);
    await new Promise((resolve) => setTimeout(resolve, 1000));
  }
}

printNumbers();