无论是前端页面上还是后端服务上,我们都会遇到需要定时去执行的任务,比如前端页面上定时去轮询配置是否发生变化,后端服务上定时检查证书是否快过期等。
01.使用setInterval定时执行
setInterval 用于重复执行一个回调函数,每间隔指定的时间间隔就执行一次。使用 clearInterval 取消定时器。
02.使用setTimeout定时执行
setTimeout 用于在指定的时间之后执行一次回调函数。执行完之后定时器就自动关掉了。
03.使用setInterval潜在的问题
上面说的,setInterval 会在固定的时间间隔里执行一次回调函数,聪明的你应该会想到了,如果上一次的回调函数执行时间超过了定义的时间间隔,setInterval 到了时间间隔后仍然会发起新一次的回调调用,而不管你上一次的执行是否已完成。也就是说会有任务堆积的问题。
04.递归使用setTimeout
为了避免 setInterval 可能出现的问题,我们建议使用 递归调用 setTimeout 的方式来实现重复任务的执行。
总结
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,以更好地控制任务的执行时间和避免堆积。
![]() |
Austin Liu 刘恒辉
Project Manager and Software Designer E-Mail:lzhdim@163.com Blog:https://lzhdim.cnblogs.com 欢迎收藏和转载此博客中的博文,但是请注明出处,给笔者一个与大家交流的空间。谢谢大家。 |




浙公网安备 33010602011771号