完美解決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

來源：掘金

著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。