完美解决setInterval在浏览器切换时加速的问题[通俗易懂]

小小码 • 2023-08-20 14:30 • 未分类 • 阅读 128

大家好，我是考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在浏览器切换中的问题：

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

所以我们需要用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