浏览器页面的显隐对js的setInterval（）执行所产生的bug

前段时间，所写的一个”js无间隙滚动效果“，当页面离开后，重新返回时，会出现动画的错乱。我以为是因为我代码逻辑的原因导致的，但是，当在火狐浏览器上进行浏览时却没有动画错乱的问题。

 

于是乎，在网上查找是否有人遇到相似的问题。效果似乎不是很理想，刚开始发现仅仅有一个人遇到和我相似的问题，解决办法是用window的blur和focus事件进行处理，如下图：

，当然了，这种方法是行得通的，但是，当使用双屏显示时，你的文档页面是可见的，当发生blur事件时，会清除动画，但是此时因为双屏的原因，你的浏览器的视图仍然可见。此时，便发生了比较尴尬的事：视图可见，但是动画却停止了。

从而只能另寻他法，

visibilitychange事件。

简单的说，当用户最小化网页或移动到另一个标签时，API会发送 visibilitychange 有关该网页的可见性的事件。你可以检测到该事件并执行一些操作或行为。例如：标签页隐藏的时候停止播放音乐视频、停止一些不必要的轮询，还有停止一些诸如轮播等循环动画效果等等。这些可以节省服务器和本地的开销；

此时要解决上述问题仍然不够，还需要一个属性进行监管控制就是：

document的可见性属性

Page Visibility (Second Edition) 中定义了2个只读的 document 属性：hidden 和 visibilityState。

其中 document.hidden 是一个布尔值，简单的表示标签页显示或者隐藏。而 document.visibilityState 属性更为详细，目前有四个可能的值：

visible : 页面内容至少部分可见。这意味着在实际情况中，该网页是一个非最小化窗口的可见标签页。

hidden : 页面内容是对用户不可见。实际上，这意味着该文档是后台标签页或最小化窗口的一部分，或者系统锁屏是时的状态。

prerender : 网页内容被预渲染并且用户不可见。

unloaded : 如果文档被卸载，那么这个值将被返回。

一般情况下我们使用 document.hidden 就能满足通常的需求。

 

visibilitychange监听事件

你可以在 document对象上注册一个监听 visibilitychange 事件，根据 document.hidden 或者 document.visibilityState 属性做一些业务逻辑：

var time=  setInterval(function () {
      _this.setAnimatedEleHeight()
  },_this.settings.delay);

document.addEventListener('visibilitychange',function(){ //浏览器切换事件
    if(document.visibilityState=='hidden') { //状态判断
        clearInterval(time)
    }else {
        time=setInterval(function () {
            _this.setAnimatedEleHeight()
        },_this.settings.delay);
    }
});

此时，通过document的监听事件visibilitychange来判断浏览器视图的显隐，从而控制动画的清除与执行，就可以完美解决上述问的动画问题；