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

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

原文連接：完美解決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
});
複製代碼