无论是前端页面上还是后端服务上,我们都会遇到需要定时去执行的任务,比如前端页面上定时去轮询配置是否发生变化,后端服务上定时检查证书是否快过期等。
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,以更好地控制任务的执行时间和避免堆积。
















