Promise 中 setInterval 和 setTimeout 的正确使用方法

在前端开发中，我们经常会用到定时器来控制某些任务，其中setInterval和setTimeout是两个常见的定时器函数。然而在使用Promise时，这些定时器函数与Promise的结合使用就需要我们格外注意。下面将详细介绍如何在Promise中正确使用setInterval和setTimeout函数。

setTimeout

在Promise中使用setTimeout函数其实很简单，我们只需要将setTimeout函数包裹在Promise中，然后在执行的回调函数中手动resolve即可。例如如下代码：

function timeout(delay) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve()
    }, delay)
  })
}

timeout(1000).then(() => {
  console.log('1 second has passed')
})

其中的timeout函数就是一个将setTimeout包装成Promise的函数。delay参数指定了毫秒数，resolve函数在delay毫秒之后会被执行。

setInterval

使用setInterval函数需要注意的是，setInterval会持续不断地执行，所以我们需要在合适的时机手动清除定时器。否则会导致内存泄漏或者性能问题。在Promise中，正确使用setInterval需要按照此步骤来：

1. 使用一个计数器变量count记录setInterval执行的次数
2. 在合适的时机手动清除定时器
3. 根据定时器执行的次数，手动resolve或reject

示例代码如下：

function interval(delay, limit) {
  return new Promise((resolve, reject) => {
    let count = 0
    const timer = setInterval(() => {
      if (count >= limit) {
        clearInterval(timer)
        resolve()
      } else {
        count++
        console.log(count)
      }
    }, delay)
  })
}

interval(1000, 5).then(() => {
  console.log('done')
}).catch(() => {
  console.log('error')
})

其中的interval函数即是将setInterval包装成Promise的函数。delay参数指定了每次执行的时间间隔，limit参数指定了最多执行多少次。在这个示例中，setInterval最多执行5次。在第5次执行后，手动清除定时器并resolve Promise。

总结

使用Promise结合定时器函数可以帮我们更好地解决一些异步需求，同时也需要注意代码的书写规范和逻辑清晰。在使用setInterval时，我们需要在合适的时机手动清除定时器并resolve或reject Promise。

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