使用setInterval（）函數閃爍圖像

Question

我做了一個輪播，並使用javascript setInterval()函數在輪播中以固定間隔旋轉圖像。 這是我使用的腳本

var timeOut = 4000;

function showSlide() {
       //....script for showing image
}

function pauseSlide() {

   setInterval(function(){showSlide();}, timeOut);

}

jQuery(document).ready(function() {
        pauseSlide();
});

現在的問題是，當我更改了瀏覽器選項卡，並在幾分鍾后再次返回輪播瀏覽器時，我看到輪播運行得比默認時間間隔快，而不是默認時間間隔，因此要快速更改的圖像假定時間間隔為0。 請幫我如何解決這個問題。

Answer 1

您必須先消除第一個間隔，然后再開始另一個間隔，或者開始同時運行多個間隔（即為什么開始看到它“更快”）

做這個

var timeOut = 4000;
var interval = 0;

function showSlide() {
       //....script for showing image
}

function pauseSlide() {

   clearInterval(interval);
   interval =  setInterval(function(){showSlide();}, timeOut);

}

jQuery(document).ready(function() {
    //NOW you can do multiple pauseSlide() calls
     pauseSlide();
     pauseSlide();
     pauseSlide();
     pauseSlide();
     pauseSlide();
});

Answer 2

據我所知，在新版本的Firefox和chrome中，背景標簽將setTimeout和setInterval固定為1000ms以提高性能。 因此，我認為您的問題可能與此有關。

也許這會有所幫助： 當Chrome中的標簽頁處於非活動狀態時，如何使setInterval也能正常工作？

Answer 3

圖像變化快於預期可能表明您以一種或另一種方式調用了pauseSlide（）。

document ready調用函數的唯一地方嗎？ showslide中的任何代碼或任何觸發文檔就緒事件的代碼？ 如果將alert()放在pauseSlide() ，它是否會彈出不止一次？