浏览器页面的显隐对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来判断浏览器视图的显隐，从而控制动画的清除与执行，就能够完美解决上述问的动画问题；