javascript + jquery + setinterval + animation

javascript + jquery + setinterval + animation

本文关键字：animation setinterval jquery javascript      更新时间：2023-09-26

我在使用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);
});

较新版本的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与动画不同步的任何问题。

相关文章：