如何使用 async/await 和 Promise 延迟 JavaScript 中的循环?
在异步编程中，一些耗时的任务是在不阻塞主线程的情况下执行的。在某些情况下，开发人员可能需要延迟循环的执行以控制程序的流程或在迭代之间引入延迟。JavaScript 提供了几种延迟执行的技术，在本文中，我们将探讨如何使用 async/await 和 Promises 的组合来延迟循环。
了解 async/await
async/await 语法是在 ECMAScript 2017 (ES8) 中引入的，它提供了一种简洁易读的编写异步代码的方法。它建立在 Promises 之上，允许开发人员以同步方式编写异步代码。 async 关键字用于声明异步函数，await 关键字用于暂停函数的执行，直到 Promise 被解析或拒绝。
使用 Promises 进行延迟
Promises 是 JavaScript 对象，表示异步操作最终完成或失败。通过利用 Promises，我们可以在代码执行中引入延迟。我们可以使用 setTimeout 函数创建一个在指定持续时间后解析的 Promise。
伪
async function functionName() {
// 异步代码
const result = await promise;
// 执行暂停，直到 Promise 被解析
// 当 Promise 被解析时，执行 await 之后的代码
}
此处，
async 关键字用于声明异步函数。它可以放在函数声明、函数表达式或箭头函数之前。
函数主体包含将异步执行的代码
await 关键字用于暂停函数的执行，直到 Promise 被解析或拒绝。
await 关键字只能在 async 函数内部使用。
promise 表示正在等待的 Promise 对象。它可以是任何 Promise，例如异步操作的结果或手动创建的 Promise。
注意
await 只能在异步函数中使用。
Await 可以与任何返回 Promise 的表达式一起使用(例如，异步函数、API 调用、setTimeout 等)。
使用 await 可以以更同步、更易读的方式编写异步代码。
示例
在下面的示例中，我们定义了一个返回 Promise 的函数延迟。此 Promise 使用 setTimeout 和 resolve 回调在指定的持续时间(毫秒)后解析。接下来，我们声明一个将执行延迟循环的异步函数 delayedLoop。在 delayedLoop 函数中，我们使用传统的 for 循环和循环变量"i"进行五次迭代。对于每次迭代，我们使用 console.log 记录一条消息，指示当前迭代次数。然后我们使用 await 关键字，后跟 delay 函数，传递所需的延迟持续时间 1000 毫秒(1 秒)。这会导致循环执行暂停指定的延迟持续时间，然后再继续进行下一次迭代。最后，我们调用 delayedLoop 函数来启动循环。
function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function delayedLoop() {
for (let i = 0; i < 5; i++) {
console.log(`Iteration ${i}`);
await delay(1000); // Delaying for 1 second (1000 milliseconds)
}
}
delayedLoop();
输出
循环的每次迭代都会延迟一秒，如 await delay(1000) 语句所指定。
Iteration 0 [waits for 1 second] Iteration 1 [waits for 1 second] Iteration 2 [waits for 1 second] Iteration 3 [waits for 1 second] Iteration 4
结论
在本文中，我们讨论了如何使用 async/await 和 Promises 延迟 JavaScript 中的循环。这种延迟允许更受控制和更连续地执行代码，这在我们需要同步 API 调用、实现定时间隔或出于各种原因引入暂停的场景中特别有用。async/await 和 Promises 的组合提供了一种优雅的解决方案，可以延迟循环执行而不会阻塞执行的主线程，从而使 JavaScript 程序更高效、响应更快。
