setInterval（）在幾個週期後加速/減速函數傳播

Question

使用setInterval()和clearInterval()循環顯示4張圖像的輪播。在初始頁面加載時，函數似乎按預期工作。但是，經過幾次循環和盤旋後，聚焦在頁面外，循環開始在幾幅圖像之間加速並在另一幅圖像內保持良好。有時，它會在循環中一起跳過圖像。有時它也會自動更正並重新開始正常工作。下面是我有：

jQuery(document).ready(function($) { 
var count = -1; 
var maxCount = $('.hero-blocks .block').length; 
var colors = new Array('yellow', 'blue', 'promo', 'purple'); 
var autopager, timer = false; 
var desktop = false, 
    mobile = false; 


function carousel() { 
    if(count < maxCount - 1) { 
     count++; 
    } else { 
     count = 0; 
    } 

    $('.hero-blocks .block.active').removeClass('active'); 
    $('.hero-blocks .block.' + colors[count] + '').addClass('active'); 

}; 

function startAutopager() { 
    autopager = window.setInterval(carousel, 4000); 

    timer = true; 
} 

function stopAutopager() { 
    window.clearInterval(autopager); 
    $('.hero-blocks .block').removeClass('active'); 

    timer = false; 
} 

function triggerCarousel() { 
    if (Modernizr.mq('only screen and (min-width: 1024px)')) { 
     // This stuff stops the carousel if the user goes to a different tab 
     if(!desktop) { 
      startAutopager(); 
      window.addEventListener('focus', startAutopager); 
      window.addEventListener('blur', stopAutopager); 

      desktop = true; 
      mobile = false; 

      $('.hero-blocks .block').hover(function() { 
       stopAutopager(); 
      }, function() { 
       startAutopager(); 
      }); 
     } 
    } else if(!mobile) { 
     stopAutopager(); 

     mobile = true; 
     desktop = false; 
    } 
} 
triggerCarousel(); 

$(window).resize(function() { 
    triggerCarousel(); 
}); 
}); 

Answer 1

我覺得這裏的問題是，它可以調用window.setInterval(carousel, 4000)多次，因爲它是幾個不同的事件時觸發，代碼不檢查它是否已經在運行。

我建議檢查的timer值調用setInterval

function startAutopager() { 
    if (!timer) { 
     autopager = window.setInterval(carousel, 4000); 

     timer = true; 
    } 
} 

function stopAutopager() { 
    if (timer) { 
     window.clearInterval(autopager); 
     $('.hero-blocks .block').removeClass('active'); 

     timer = false; 
    } 
} 

另一個小點之前 - setInterval不保證完美的時機，所以它仍然可能carousel將與不同的時間間隔觸發。