4

setIntervalとjqueryanimateに問題があります。これが私のコードです：

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);
});
4

1 に答える 1

4

新しいバージョンの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の同期が外れる問題が回避されます。

于 2012-05-20T06:35:14.700 に答える