本文探讨JavaScript中定时器的使用与优化。指出setInterval在短时间间隔下易导致回调堆积,建议采用setTimeout进行延时递归调用来替代。通过引入状态标志位控制执行流程,实现更精准的定时控制和即时取消功能,提升代码稳定性。
JavaScript定时器的常规用法
常规做法如下: 启动定时器:
代码如下:
window.setInterval(Method,Time)
Method代表需要定时执行的JS函数
Time表示时间间隔,单位为毫秒 取消定时器:
代码如下:
clearInterval(Method);
定时器取消问题与优化方案
这里存在一个问题:使用 clearInterval(timerid) 往往无法立即停止定时器,有什么更好的解决方法? 优化方案如下:
代码如下:
var timeout = false; //用于启动及关闭按钮的状态控制
function time()
{
if(timeout) return;
Method();
setTimeout(time,100); //time指向自身,通过延时递归调用实现循环,100为间隔时间,单位毫秒
}
总结:为何推荐setTimeout递归
总结
通常不建议直接使用setInterval,而推荐使用setTimeout的延时递归来替代interval。 setInterval容易引发回调堆积,尤其是在设置的时间间隔较短时更为明显。