在前端开发中，我们经常需要实现一些延迟执行任务的需求，比如在用户输入完毕后，等待一段时间再进行搜索，或者在用户滚动页面到底部时，等待一段时间再触发加载更多数据操作。这些都可以通过 Promise 配合 setTimeout 实现。
Promise 和 setTimeout 简介
在学习 Promise 和 setTimeout 之前，我们先来了解一下它们各自的概念。
Promise
Promise 是 ES6 引入的一种新的异步编程解决方案，它的目标是为了解决回调地狱（callback hell）问题，让异步编程更加简洁、易读、易维护。Promise 有三种状态：等待态（pending）、完成态（fulfilled）和拒绝态（rejected），一旦状态发生改变，就不会再改变。
setTimeout
setTimeout 是 JavaScript 提供的一个定时器函数，可以用来在一定时间后执行某个函数或代码块。它的参数有两个，第一个是要执行的函数或代码块，第二个是延迟的时间（单位为毫秒）。
Promise 配合 setTimeout 实现延迟执行任务
现在来讲一下如何使用 Promise 配合 setTimeout 实现延迟执行任务。
首先，我们需要创建一个 Promise 实例，然后在 Promise 内部使用 setTimeout 函数。在 setTimeout 的回调函数内部，我们可以通过 Promise 的 resolve 方法将 Promise 状态改变为完成态，从而执行后续的操作。
示例代码如下：
function delay(time) {
return new Promise(resolve => setTimeout(resolve, time));
}
delay(2000).then(() => {
console.log('延迟两秒钟后执行');
});这段代码中，我们定义了一个 delay 函数，它接收一个时间参数，并返回一个 Promise 实例。在 Promise 内部，我们使用了 setTimeout 函数，并在 setTimeout 的回调函数中调用了 Promise 的 resolve 方法，从而将 Promise 状态改变为完成态。
在后续的 then 方法中，我们可以执行需要延迟执行的任务，比如输出一段文字。
Promise 配合 setTimeout 链式调用实现多个延迟任务
上面的示例代码只能实现一个简单的延迟执行任务，如果我们需要实现多个任务的延迟执行，怎么办呢？这时，我们就需要使用 Promise 的链式调用了。
示例代码如下：
// javascriptcn.com 代码示例
function delay(time) {
return new Promise(resolve => setTimeout(resolve, time));
}
delay(2000)
.then(() => {
console.log('第一个任务延迟两秒钟后执行');
return delay(1000);
})
.then(() => {
console.log('第二个任务延迟一秒钟后执行');
return delay(500);
})
.then(() => {
console.log('第三个任务延迟半秒钟后执行');
});在这段代码中，我们先定义了一个 delay 函数，它返回一个 Promise 实例。在该 Promise 实例内部，我们使用了 setTimeout 函数，并在 setTimeout 的回调函数内调用了 Promise 的 resolve 方法。
在后续的 then 方法内部，我们可以执行需要延迟执行的任务。每个 then 方法的返回值都是一个 Promise 实例，因此我们可以使用链式调用的方式实现多个延迟任务的延迟执行。
总结
本文介绍了如何使用 Promise 配合 setTimeout 实现延迟执行任务，并介绍了如何使用 Promise 链式调用实现多个延迟任务的延迟执行。通过本文的学习，我们可以更好地掌握 Promise 和 setTimeout 的使用，以及如何使用它们来解决一些实际问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652cc8807d4982a6ebe5b931