浏览器切出后定时器过几分钟停止问题

1.原因

浏览器为了节约资源，会停止不是当前窗口下的定时器

2.解决办法

2.1 window的bulr和focus

当浏览器失去焦点后清除定时器，聚焦后重新开始定时器，或者失去焦点不管，重新聚集后重新刷新计时

window.onblur = function () {
    document.title = "退出页面";
}
window.onfocus = function () {
    document.title = "进入页面";
}
//或者使用window.addEventListener,removeEventListener

2.2 浏览器页面可见性 API visibilityChange

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

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

　推荐2.2，用这种方法我们可以在更多的业务场景中用到：

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

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

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

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