JQuery SetInterval создает анимацию наращивания

Question

Я создал галерею с помощью setInterval

fiddle

Галерея отлично работает, единственная проблема в том, что если кто-то покидает страницу, исследуя другую «вкладку браузера»,Возвращаясь к странице галереи, похоже, что setInterval() в сочетании с jQuery .animate() создает странное наращивание анимации.

Чтобы прояснить ситуацию: когда вы возвращаетесь из другой открытой «вкладки браузера»на страницу - анимация выглядит так, как будто она кэшировала все анимации, и теперь пытается компенсировать все анимации одновременно.

Пожалуйста, любые советы будут высоко оценены.
Спасибо

Answer 1

Вы не должны делать setInterval() здесь. Вы никогда не можете предполагать, что ваша анимация будет закончена вовремя для следующего интервала. Всегда используйте setTimeout внутри обратного вызова:

   function start(){
        interv = setTimeout(function() {         
            counter++;                  
            if (counter === (iN+1)) {
                counter = 1;
            }          
            $('#slideshow').animate({scrollLeft: 922*(counter-1)}, 1000, function(){ 
                     start(); // Apply recursive callback
            });
        }, 2000);         
    }

Затем позже используйте clearTimeout() вместо clearInterval()