javascript + jquery + setinterval + animation

我遇到了setInterval和jquery animate的问题。 这是我的代码：

function slides1() { ... $("table#agah1").animate({ "left": first1 }, "slow"); $("table#agah2").animate({ "left": first2 }, "slow"); } $(function () { cyc = setInterval("slides1()", 3000); }); 

当切换到另一个浏览器选项卡，并在一段时间后返回时，动画会毫不拖延地继续这样做，因为我已经离开选项卡，然后行动正确。 我添加了这些也没有任何运气：

 $(window).focus(function () { jQuery.fx.off = false; cyc = setInterval("slides1()", 3000); }); $(window).blur(function () { jQuery.fx.off = true; window.clearInterval(cyc); }); 

Answer 1

较新版本的jQuery使用requestAnimationFrame回调来处理效果，浏览器不会处理隐藏选项卡上的那些。

与此同时，您的setInterval事件仍在发生，导致更多动画排队等候。

不是使用setInterval来调度动画，而是使用上一个动画的“完成回调”来触发下一个循环，必要时使用setTimeout 。

 function slides1() { ... $("table#agah1").animate({ "left": first1 }, "slow"); $("table#agah2").animate({ "left": first2 }, "slow", function() { setTimeout(slides1, 2000); // start again 2s after this finishes }); } $(function () { setTimeout(slides1, 3000); // nb: not "slides1()" }); 

这将确保在交感延迟和动画本身之间存在紧密耦合，并避免setTimeout与动画不同步的任何问题。