无论是前端页面上还是后端服务上,我们都会遇到需要定时去执行的任务,比如前端页面上定时去轮询配置是否发生变化,后端服务上定时检查证书是否快过期等。

01.使用setInterval定时执行

setInterval 用于重复执行一个回调函数,每间隔指定的时间间隔就执行一次。使用 clearInterval 取消定时器。

let count = 0;


const intervalId = setInterval(() => {
  console.log(`计数器:${count}`);
  count++;
  if (count >= 5) {
    clearInterval(intervalId); // 停止定时器
  }
}, 1000);



02.使用setTimeout定时执行


setTimeout 用于在指定的时间之后执行一次回调函数。执行完之后定时器就自动关掉了。

setTimeout(() => {
  console.log('3秒后执行');
}, 3000);


03.使用setInterval潜在的问题

上面说的,setInterval 会在固定的时间间隔里执行一次回调函数,聪明的你应该会想到了,如果上一次的回调函数执行时间超过了定义的时间间隔,setInterval 到了时间间隔后仍然会发起新一次的回调调用,而不管你上一次的执行是否已完成。也就是说会有任务堆积的问题。

04.递归使用setTimeout

为了避免 setInterval 可能出现的问题,我们建议使用 递归调用 setTimeout 的方式来实现重复任务的执行。

let count = 0;


function incrementCount() {
  console.log(`计数器:${count}`);
  count++;
  if (count < 5) {
    setTimeout(incrementCount, 1000);
  }
}


incrementCount();



 总结  

尽量使用 setTimeout 的递归调用代替 setInterval,以更好地控制任务的执行时间和避免堆积。