Promise 如何实现延时-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要延时执行某些操作，比如在页面加载完成后延时一段时间再执行某些操作，或者在用户输入完成后延时一段时间再进行搜索等等。在 JavaScript 中，我们可以使用 setTimeout() 函数来实现延时，但是在使用 Promise 的情况下，我们也可以通过 Promise 的 API 来实现延时。

Promise 的定时器 API

Promise 提供了两个 API 来实现定时器功能：

Promise.resolve()：返回一个已经被解决的 Promise 对象。
Promise.reject()：返回一个已经被拒绝的 Promise 对象。

这两个 API 都可以用来实现延时功能。

基于 Promise.resolve() 的延时实现

我们可以使用 Promise.resolve() 返回一个已经被解决的 Promise 对象，然后通过调用 .then() 方法来实现延时功能。代码如下：

// javascriptcn.com 代码示例
function delay(time) {
  return Promise.resolve().then(() => {
    return new Promise(resolve => {
      setTimeout(resolve, time);
    });
  });
}

delay(1000).then(() => {
  console.log('延时1秒');
});

上面的代码中，delay() 函数接受一个时间参数，返回一个 Promise 对象，然后在 .then() 方法中通过 setTimeout() 函数来实现延时效果。

基于 Promise.reject() 的延时实现

我们也可以使用 Promise.reject() 返回一个已经被拒绝的 Promise 对象，然后通过调用 .catch() 方法来实现延时功能。代码如下：

// javascriptcn.com 代码示例
function delay(time) {
  return Promise.reject().catch(() => {
    return new Promise(resolve => {
      setTimeout(resolve, time);
    });
  });
}

delay(1000).then(() => {
  console.log('延时1秒');
});

上面的代码中，delay() 函数接受一个时间参数，返回一个 Promise 对象，然后在 .catch() 方法中通过 setTimeout() 函数来实现延时效果。

深入理解 Promise 的延时实现

在上面的代码中，我们使用了 Promise.resolve() 和 Promise.reject() 来实现延时。这是因为 Promise 对象的状态只能被改变一次，一旦状态被改变，就不能再次改变。因此，我们需要使用 Promise.resolve() 和 Promise.reject() 来创建已经被解决和已经被拒绝的 Promise 对象，以确保 Promise 对象的状态只被改变一次。

在上面的代码中，我们使用了 .then() 和 .catch() 方法来处理 Promise 对象的状态变化。.then() 方法在 Promise 对象被解决时被调用，而 .catch() 方法在 Promise 对象被拒绝时被调用。

总结

本文介绍了 Promise 如何实现延时的方法，并对 Promise 的定时器 API 进行了详细的讲解。通过本文的学习，我们可以更深入地理解 Promise 的用法，以及如何在实际开发中使用 Promise 来实现各种功能。

示例代码

// javascriptcn.com 代码示例
function delay(time) {
  return Promise.resolve().then(() => {
    return new Promise(resolve => {
      setTimeout(resolve, time);
    });
  });
}

delay(1000).then(() => {
  console.log('延时1秒');
});

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65618482d2f5e1655db919a9