监听h5页面显示与隐藏事件

说明：
在最近的项目开发中，需要前端写一个h5页面然后嵌入到java安卓app里面，这里不讲web与Java的通讯，有这么一个需求，定时器定期去调用接口拿数据动态的展示到折线图中，但是呢遇到了这么一个问题，H5进入后台运行导致定时器不能用的问题，这就导致数据不是连续的，想在java那边解决，但是java那边做的是数据库方向的，也不是专业的java安卓开发，就只能自己解决了
于是我就想到前端可以监听页面进入到后台是运行的场景吗？这不就是页面的显示与隐藏，当我们手机把项目切入到后台时，或者息屏时触发相应的事件就好了

visibilitychange事件

是浏览器的新事件方法，主要是用来监听页面是否处于显示状态，现在主流的浏览器都支持此事件，当浏览器进行切换选项卡，最小化，最大化等操作的时候会主动触发该事件。

document.hidden属性

用来表示当前页面是隐藏状态还是激活显示状态，当页面是隐藏非激活状态的时候该值为true，当页面是激活状态的时候该值为false，该属性为只读属性。
我们可以通过上边的visibilitychange事件结合document.hidden做一些效果
其实代码也非常的简单

 // 给document绑定一个visibilitychange事件，当前页面显示或者隐藏的时候执行该事件
    document.addEventListener("visibilitychange", function() {
      // 判断当前document是显示状态还是隐藏状态
      if(!document.hidden){
        // 如果是显示状态执行相应的事件
        
      }else{
        // 如果是隐藏状态执行相应的事件
        
      }
    });

举个例子来说：
假如既有这么一个需求，你在做一个音乐播放器的功能，当页面隐藏时要暂停播放，当页面显示的时候就开始播放，那你用这个事件来岂不是事半功倍。