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()