jquery setInterval creates animations buildup

I created a gallery using setInterval

fiddle

The gallery works great, the only problem is that if someone leaves the page exploring another 'browser tab', coming back to the ga开发者_运维技巧llery page, it looks like setInterval() in combination with the jQuery .animate() creates a strange animation buildup.

To make my self clear: when you come back from another opened 'browser tab' to the page - the animation seem like it has cached all the animations and now is trying to compensate all the animations at once.

Please any advice will be greatly appreciated.

Thanks

You should not be doing setInterval() here. You can never assume that your animation will be finished in time for the next interval. Always use setTimeout inside a callback:

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

Then later on, use clearTimeout() instead of clearInterval()