完美解決setInterval在瀏覽器切換時加速的問題

原文鏈接：https://juejin.im/post/5b30a4a451882574ba421b68

完美解決setInterval在瀏覽器切換時加速的問題

JavaScript中當我們切換瀏覽器的時候，setInterval會加快速度。

導致這個原因是：發現這是因爲瀏覽器本着節省內存的性質，當切換到其他頁面時，採油系統頁面的定時器不運動，但是動畫依然排列，當切換回來的時候，動畫加速運動，出現錯誤，在輪播圖之類的頁面經常會發生這樣的情況。

在這裏我們需要用到以下三個知識點：

• document.onvisibilitychange ：只要頁面發生變化，不管是切換到其他的頁面還是把瀏覽器縮小，都會觸發這個事件。

• document.hidden：這個是指當頁面不是當前頁面時爲true，否則爲false

• document.visibilityState:
  這個屬性有四個值，分爲是：visible，hidden，prerender，unloaded
  visible 表示當前網頁是可見或者是部分可見的。
  hidden：當前網頁是不可見的
  prerender 網頁內容被預渲染並且用戶不可見
  unloaded 如果文檔被卸載，那麼這個值將被返回

實際操作效果如下：

document.onvisibilitychange=function(){
	console.log("hidden"+":"+document.hidden);
	console.log("visibilityState"+":"+document.visibilityState);
}

執行效果如下：

解決setInterval在瀏覽器切換中的問題：
思路：如果頁面是不可見的，那麼我們就會清除定時器，如果頁面是可見的，那麼我們就重新開啓定時器。
所以我們需要用document.onvisibilitychange進行監聽，然後用document.visibilityState或者是document.hidden進行判斷。
實際操作:

document.onvisibilitychange=function(){
  if(document.visibilityState=="visible"){
      timer=setInterval(slidemove, 1000);
  }else{
      clearInterval(timer);
  }
}

jq中animate的解決
如果用的是jq的animate這個方法，就只需要到這個方法的前面加上stop(true,true)

$(".slidePanel").stop(true,true).animate({
	"left": -iNow*varWidth+"px",
	"speed":300
});

作者：蝸牛君_
鏈接：https://juejin.im/post/5b30a4a451882574ba421b68
來源：掘金
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。