如何使用 async/await 和 Promise 在 JavaScript 中延迟循环?


在异步编程中,一些耗时的任务在不阻塞主线程的情况下执行。在某些情况下,开发人员可能需要延迟循环的执行来控制程序的流程或在迭代之间引入延迟。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 关键字只能在 async 函数内部使用。

  • promise 表示正在等待的 Promise 对象。它可以是任何 Promise,例如异步操作的结果或手动创建的 Promise。

注意

  • await 只能在 async 函数中使用。

  • Await 可以与任何返回 Promise 的表达式一起使用(例如,async 函数、API 调用、setTimeout 等)。

  • 使用 await 允许你以更同步和易读的方式编写异步代码。

示例

在下面的示例中,我们定义了一个名为 delay 的函数,它返回一个 Promise。此 Promise 使用 setTimeout 和 resolve 回调在指定的持续时间 (ms) 后解析。接下来,我们声明一个名为 delayedLoop 的 async 函数,它将执行延迟循环。在 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 程序更有效率和响应更快。

更新于: 2023-07-17

3K+ 阅读量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告