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