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