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

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

在项目开发中使用了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.当设备进入待机模式时，网站想要关闭设备声音（用户按下电源键关闭屏幕）。