大家好,我是考100分的小小码 ,祝大家学习进步,加薪顺利呀。今天说一说完美解决setInterval在浏览器切换时加速的问题[通俗易懂],希望您对编程的造诣更进一步.
JavaScript中当我们切换浏览器的时候,setInterval会加快速度
原文链接:完美解决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在浏览器切换时加速的问题[通俗易懂]插图1 完美解决setInterval在浏览器切换时加速的问题[通俗易懂]](https://daima100.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
解决setInterval在浏览器切换中的问题:
思路:如果页面是不可见的,那么我们就会清除定时器,如果页面是可见的,那么我们就重新开启定时器。
所以我们需要用document.onvisibilitychange进行监听,然后用document.visibilityState或者是document.hidden进行判断。
实际操作:
document.onvisibilitychange=function(){
if(document.visibilityState=="visible"){
timer=setInterval(slidemove, 1000);
}else{
clearInterval(timer);
}
}
jq中animate的解决
如果用的是jq的animate这个方法,就只需要到这个方法的前面加上stop(true,true)
$(".slidePanel").stop(true,true).animate({
"left": -iNow*varWidth+"px",
"speed":300
});
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
转载请注明出处: https://daima100.com/12945.html