setInterval在浏览器切换时加速的问题解决办法

JavaScript中当我们切换浏览器的时候,setInterval会加快速度

这是因为浏览器本着节省内存的性质,当切换到其他页面时,采油系统页面的定时器不运动,但是动画依然排列,当切换回来的时候,动画加速运动,出现错误,在轮播图之类的页面经常会发生这样的情况

在这里我们需要用到以下三个知识点:

document.onvisibilitychange

只要页面发生变化,不管是切换到其他的页面还是把浏览器缩小,都会触发这个事件。

document.hidden

这个是指当页面不是当前页面时为true,否则为false

document.visibilityState

这个属性有四个值,分为是:visible,hidden,prerender,unloaded

visible 表示当前网页是可见或者是部分可见的。

hidden:当前网页是不可见的

prerender 网页内容被预渲染并且用户不可见

unloaded 如果文档被卸载,那么这个值将被返回

实际操作效果如下:

document.onvisibilitychange=function(){
    console.log("hidden"+":"+document.hidden);
    console.log("visibilityState"+":"+document.visibilityState);
}

解决setInterval在浏览器切换中的问题:

思路:如果页面是不可见的,那么我们就会清除定时器,如果页面是可见的,那么我们就重新开启定时器。

所以我们需要用document.onvisibilitychange进行监听,然后用document.visibilityState或者是document.hidden进行判断。

实际操作:

document.onvisibilitychange=function(){
   if(document.visibilityState=="visible"){
       timer=setInterval(slidemove, 1000);
   }else{
       clearInterval(timer);
   }
}

jquery中animate的解决

如果用的是jq的animate这个方法,就只需要到这个方法的前面加上stop(true,true)

$(".xxx").stop(true,true).animate({
    "left": "px",
    "speed":300
});

发表评论

电子邮件地址不会被公开。