js定时器setinterval越来越快的原因
之前写了一个模板,焦点图的播放速度会越来越快,做过清除过定时器clearInterval,似乎并没有改变,也就放着并无理会!
最近写另一个模板,焦点图调用同样的JS,长时间观察,并没有发现定时器setinterval越来越快的现象!又重新回到之前的模板,仔细的观察了一下,可能是因为设置了两个setinterval的原因!
JS的运行时单线程的,两个setinterval可能会发生冲突,导致定时器越来越快!虽然调用了不同的function!完成之后回去去掉一个setinterval再试试!
第二次:
模板需要轮播焦点图,支持手机触屏滑动,效果代码很早之前就写了,使用了setInterval定时器播放,animate播放效果,速度一直出现越来越快的问题!
第一次修改:clearInterval(timer);将timer定义到全局变量,解决了当前页播放越来越快的问题!使用一段时间后,有出现了越来越快的问题,随后就搁置了!
第二次修改:将setInterval改成了setTimeout,使用一段时间后,发现还是会有越来越快的问题!
之后百度了一个轮播焦点图,使用一段时间后,感觉不顺手!
第三次修改:每次setInterval前,都添加一次clearInterval,在切换标签之后,一段时间,还是会越来越快!
百度了一下,还是没有找到具体的解决方案!继续使用上次百度的轮播图代码(真心不符合心里要求)
今天再次百度了下,了解到了一个问题,越来越快不应该发生在setInterval上,因为每次越来越快之后,轮播图的小圆点是正常的,之后播放效果越来越快!问题可能出现在了animate上!
“发现这是因为浏览器本着节省内存的性质,当切换到其他页面时,页面的定时器不运动,但是动画依然排列,当切换回来的时候,动画加速运动,出现错误,在轮播图之类的页面经常会发生这样的情况”
百度出来的说明,检查了下代码,animate的写法确实是和其他的不一样,别人的写法是:stop.animate,我直接就animate了,所以,可能是在切换浏览器的时候,setInterval停止了,但是animate动画却一直在排列,所以当切换浏览器标签回来的时候,前面已经积压了一堆的动画一下子就开始全部播放了,clearInterval也无法起作用,因为压根和clearInterval无关
所以,第四次修改,将animate改成stop.animate,另外顺便判断了下当前页面是否可见document.onvisibilitychange,当切换到其他标签的时候,停止顺便也停止了下定时器!
$(document).on('visibilitychange', function (e) {
if (e.target.visibilityState === "visible") {
play();
} else {
stop();
}
});
现在切换回来的时候停留在了切换走时的动画页面!应该不会再发生越来越快的问题了!