巧用setTimeout模拟setInterval，实现灵活的计时控制

2023-09-11 07:02:47

在项目开发中，我们经常会遇到需要计时器的情况，比如抽奖活动的倒计时，或者轮循去请求接口等。通常情况下，我们会使用 setInterval 方法来实现计时。setInterval 方法可以让我们设置一个时间间隔，然后在该时间间隔内不断执行指定的代码。

但是，setInterval 方法有一个缺点，就是它不能控制执行的频率。这意味着，如果在执行代码的过程中遇到了阻塞操作，那么就会导致后续的执行延迟。

为了解决这个问题，我们可以使用 setTimeout 方法来模拟 setInterval。setTimeout 方法可以让我们设置一个延迟时间，然后在该延迟时间后执行指定的代码。

// 使用 setTimeout 模拟 setInterval
function mySetInterval(callback, delay) {
  setTimeout(() => {
    callback();
    mySetInterval(callback, delay);
  }, delay);
}

// 使用 mySetInterval 来实现一个倒计时
const countDown = (duration) => {
  let remainingTime = duration;
  mySetInterval(() => {
    if (remainingTime > 0) {
      console.log(`倒计时：${remainingTime} 秒`);
      remainingTime -= 1;
    } else {
      console.log('倒计时结束');
    }
  }, 1000);
};

countDown(10); // 倒计时 10 秒