数サイクル後にsetInterval（）を実行すると、速度が遅くなります。

Question

setInterval()とclearInterval()を使用して4枚のカルーセルを循環させます。最初のページの読み込み時に、関数が期待どおりに機能しているように見えます。しかし、いくつかのサイクルとホバーの後、ページの焦点を合わせると、サイクルは2つのイメージの間でスピードアップを開始し、もう一方のイメージ内では良好な状態を維持します。時には、サイクルで画像をすべてスキップすることもあります。時々それはまたautocorrectsそして再びうまく働き始める。ここでは、私が持っているものです。

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)を複数回呼び出すことが可能であるということです、そして、それはすでに実行している場合、コードはチェックしませんと思います。

私は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; 
    } 
} 

別のマイナーなポイントを呼び出す前にtimerの値をチェックすることをお勧め - setIntervalは完璧なタイミングを保証するものではありませんので、carouselが異なる間隔でトリガーされることはまだ可能です。