前段時間，所寫的一個”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來判斷瀏覽器視圖的顯隱，從而控制動畫的清除與執行，就可以完美解決上述問的動畫問題；