龙空技术网

解决浏览器窗口切换后定时器执行异常的问题

前端开发123 162

前言:

现时大家对“js定时器关闭后怎么开启”大约比较注重,各位老铁们都需要学习一些“js定时器关闭后怎么开启”的相关知识。那么小编也在网摘上网罗了一些对于“js定时器关闭后怎么开启””的相关资讯,希望看官们能喜欢,大家快快来学习一下吧!

在项目开发中使用了js定时器,当切换浏览器窗口后,会发现定时器执行出现异常,原因是浏览器为了节约资源,会停止不是当前窗口下的定时器,反复切换就会出现异常,解决方法有两种;

第一种,使用window.onblur、window.onfocus来解决;

当浏览器失去焦点后清除定时器,聚焦后重新开始定时器;

js代码如下:

window.onblur = function () {      document.title = "退出页面";  }  window.onfocus = function () {      document.title = "进入页面";  }

第二种,使用浏览器页面可见性 API visibilityChange事件解决;

当浏览器最小化窗口或切换到另一个选项卡时就会触发visibilityChange事件,我们可以在事件中用Document.hidden或者Document.visibilityState判断当前窗口的状态,来决定除定时器后者重新开始定时器;

js代码如下:

document.addEventListener("visibilitychange", function() {	if (document.hidden === true) {		// 页面被挂起	} else {		// 页面由挂起被激活	}  });

推荐使用第二种方法,用这种方法我们可以在更多的业务场景中用到:

>1.网站有图片轮播效果,只有在用户观看轮播的时候,才会自动展示下一张幻灯片。

2.显示信息仪表盘的应用程序不希望在页面不可见时轮询服务器进行更新。

3.页面想要检测是否正在渲染,以便可以准确的计算网页浏览量(埋点使用场景)。

4.当设备进入待机模式时,网站想要关闭设备声音(用户按下电源键关闭屏幕)。

标签: #js定时器关闭后怎么开启 #js清除定时器无效 #js定时器重复执行怎么停止