极客笔记JavaScript 如何使用async/await和Promise延迟循环
在异步编程中，一些耗时的任务可以在不阻塞主线程的情况下执行。在某些情况下，开发人员可能需要延迟循环的执行，以控制程序的流程或在迭代之间引入延迟。JavaScript提供了多种延迟执行的技术，在本文中，我们将探讨如何使用async/await和Promise结合来延迟循环。
理解async/await
async/await语法在ECMAScript 2017（ES8）中引入，提供了一种简洁易读的编写异步代码的方式。它构建在Promise之上，允许开发人员以同步的方式编写异步代码。async关键字用于声明异步函数，而await关键字用于暂停函数的执行，直到一个Promise被解析或拒绝。
使用Promise进行延迟
Promise是JavaScript对象，表示异步操作的最终完成或失败。通过利用Promise，我们可以在代码执行中引入延迟。我们可以使用setTimeout函数创建一个在指定时间后解析的Promise。
伪代码
async function functionName() {
// Asynchronous code
const result = await promise;
// Execution pauses until the promise is resolved
// Code after await is executed when the promise is resolved
}
在这里，
- async关键字用来声明一个异步函数。它可以放在函数声明、函数表达式或箭头函数之前。
-
函数体包含将以异步方式执行的代码
-
await关键字用于暂停函数的执行，直到Promise被解析或拒绝。
-
await关键字只能在异步函数中使用。
-
promise表示正在等待的Promise对象。它可以是任何Promise，例如异步操作的结果或手动创建的Promise。
注意
-
await只能在异步函数内部使用。
-
Await可以与返回Promise的任何表达式一起使用（例如异步函数、API调用、setTimeout等）。
-
使用await可以以更同步和可读的方式编写异步代码。
示例
在下面的例子中，我们定义了一个返回Promise的函数delay。这个Promise使用setTimeout和resolve回调在指定的持续时间（毫秒）后解析。接下来，我们声明了一个async函数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和Promise在javascript中延迟循环。这种延迟允许更加可控和顺序执行代码，尤其适用于需要同步API调用、实现定时间隔或出于各种原因需要暂停的场景。async/await和Promise的结合为延迟循环执行提供了优雅的解决方案，同时不会阻塞主线程的执行，使JavaScript程序更高效和响应。