document.visibilityState 监听浏览器

document.hidden：表示页面是否隐藏的布尔值。页面隐藏包括 页面在后台标签页中 或者 浏览器最小化 （注意，页面被其他软件遮盖并不算隐藏，比如打开的 sublime 遮住了浏览器）。

document.visibilityState：表示下面 4 个可能状态的值

hidden：页面在后台标签页中或者浏览器最小化

visible：页面在前台标签页中

prerender：页面在屏幕外执行预渲染处理 document.hidden 的值为 true

unloaded：页面正在从内存中卸载

Visibilitychange事件：当文档从可见变为不可见或者从不可见变为可见时，会触发该事件。

这样，我们可以监听 Visibilitychange 事件，当该事件触发时，获取 document.hidden 的值，根据该值进行页面一些事件的处理。

document.addEventListener('visibilitychange', function() {
   var isHidden = document.hidden;
   if (isHidden) {
     document.title = '当焦点不在当前窗口时的网页标题';
   } else {
     document.title = '再变回来或者做点其他的';
   }
 });

　
var show=function(){
　//显示数据
};
var timer = null;
var loopHandle = function () {
　　//判断浏览器在当前前台显示
   if (document.visibilityState === 'visible') {
　　　　//调用方法
       show();
　　　　//间隔函数轮询显示数据
       setInterval(function () {
            show();
       }, 5000);
       console.log('轮询开始');
    }
    else {
　　　　//终止间隔函数
   　　clearTimeout(timer);
     　timer = null;
    　 console.log('轮询停止');
    }
};
//addEventListener() 方法用于向指定元素添加事件句柄。
//visibilitychange事件判断页面可见性

  //浏览器标签页被隐藏或显示的时候会触发visibilitychange事件
　// 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

document.addEventListener('visibilitychange', function (e) {
     loopHandle();
});
loopHandle();

//添加点击事件
document.getElementById("myBtn").addEventListener("click", function(){
    document.getElementById("demo").innerHTML = "Hello World";
});

 

visibilitychange事件的一些应用场景:

1.网站有图片轮播效果，只有在用户观看轮播的时候，才会自动展示下一张幻灯片。
2.显示信息仪表盘的应用程序不希望在页面不可见时轮询服务器进行更新。
3.页面想要检测是否正在渲染，以便可以准确的计算网页浏览量（埋点使用场景）。
4.当设备进入待机模式时，网站想要关闭设备声音（用户按下电源键关闭屏幕）

资料链接:https://www.jianshu.com/p/e905584f8ed2

                https://www.runoob.com/jsref/met-element-addeventlistener.html