瀏覽器頁面的顯隱對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來判斷瀏覽器視圖的顯隱，從而控制動畫的清除與執行，就能夠完美解決上述問的動畫問題；