节点JS异步延迟 - JavaScript

在JavaScript中，我们经常需要在异步代码中使用延迟函数。使用延迟函数可以确保我们的代码在特定时间之后执行，或者在框架准备好之后再进行操作。本文将介绍一些最常见的用于延迟和异步代码的技术。

延迟函数

延迟函数是JavaScript中最常见的延迟和异步代码的实现方式之一。它让我们能够在指定时间之后执行一些代码。有两种常见的方式可以实现延迟函数：

• 使用setTimeout函数
• 使用setInterval函数

setTimeout函数

setTimeout函数允许我们将一个函数和一个时间作为参数，然后在指定的时间后执行该函数。例如，以下代码将在3秒钟之后输出“Hello, World!”：

setTimeout(() => {
  console.log('Hello, World!');
}, 3000);

setTimeout函数返回一个唯一标识符，我们可以在稍后使用该标识符来取消计时器：

const timerId = setTimeout(() => {
  console.log('Hello, World!');
}, 3000);

// 取消计时器
clearTimeout(timerId);

setInterval函数

setInterval函数允许我们将一个函数和一个时间作为参数，然后每隔一段时间就执行该函数。例如，以下代码将每隔1秒钟输出一次“Hello, World!”：

setInterval(() => {
  console.log('Hello, World!');
}, 1000);

与setTimeout函数类似，setInterval函数也返回一个唯一标识符，我们可以在稍后使用该标识符来取消计时器：

const timerId = setInterval(() => {
  console.log('Hello, World!');
}, 1000);

// 取消计时器
clearInterval(timerId);

代码片段

// 使用setTimeout函数延迟执行函数
setTimeout(() => {
  console.log('Hello, World!');
}, 3000);

// 使用setInterval函数每隔1秒九执行一次函数
setInterval(() => {
  console.log('Hello, World!');
}, 1000);

Promise对象

Promise是用于异步编程的一种非常有用的模式和API。Promise对象代表了一个执行异步操作并返回结果或错误的操作。Promise对象可以以以下三种状态之一结束：

• 待定 (pending)：Promise对象的初始状态
• 充实 (fulfilled)：表示Promise对象已成功执行
• 拒绝 (rejected)：表示Promise对象执行时发生了错误

Promise对象的一个重要特性是可以将多个异步操作链接在一起。例如，以下代码演示了如何按顺序执行3个异步操作：

promise1()
  .then(() => {
    return promise2();
  })
  .then(() => {
    return promise3();
  })
  .then(() => {
    console.log('All promises resolved!');
  })
  .catch((error) => {
    console.error(error);
  });

在这个例子中，我们首先运行了promise1函数，然后使用then方法在promise1成功完成后运行promise2函数，并将其结果传递给promise3函数。最后，我们使用catch方法来捕获任何错误并输出它们。

代码片段

promise1()
  .then(() => {
    return promise2();
  })
  .then(() => {
    return promise3();
  })
  .then(() => {
    console.log('All promises resolved!');
  })
  .catch((error) => {
    console.error(error);
  });

Async/await

Async/await是JavaScript中用于处理异步代码的一种新方式。它建立在Promise之上，可以让我们编写异步代码的同步方式。

使用async/await的方式非常简单。首先，我们要将async关键字添加到函数声明中，以表示该函数将返回Promise。然后，我们可以使用await关键字来等待异步操作完成，并在完成时获取其结果。

例如，以下代码展示了如何使用async/await来等待Promise对象的完成：

async function myFunction() {
  try {
    const result = await myPromise();
    console.log('Promise fulfilled:', result);
  } catch (error) {
    console.error('Promise rejected:', error);
  }
}

在这个例子中，我们首先将async关键字添加到函数声明中，然后使用await关键字来等待myPromise函数的完成。如果myPromise函数成功执行，则我们会在控制台输出“Promise fulfilled:”和结果值。如果发生错误，则会在控制台输出“Promise rejected:”和错误信息。

代码片段

async function myFunction() {
  try {
    const result = await myPromise();
    console.log('Promise fulfilled:', result);
  } catch (error) {
    console.error('Promise rejected:', error);
  }
}