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

蝸牛君_發表於2019-02-28
瀏覽器

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在瀏覽器切換時加速的問題

解決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
});

複製程式碼

相關文章