1

誰もが clearInterval にいくつかの問題を抱えているようです。矢印をクリックしてホバーできるスライダーを作成しました。バナーも数秒ごとに回転します。誰かが矢印の 1 つをクリックした後、自動回転をオフにできるようにしたいと考えています。

これが私のコードです：

$(function(){
    var intvl = 0;
    intvl = setInterval(heroTransitionNext, 2000);
    $('.rightArrow').click(function(){
       window.clearInterval(intvl);
    });
});

編集：

呼び出している関数は次のとおりです。

function heroTransitionNext() {
    $('.HP-hero li').filter(':visible').fadeOut('normal', function () {
        if ($(this).next().length != 0) {
            activeZone = parseInt(activeZone) + 1;
            $(this).next().fadeIn('normal', heroNavHighlight(activeZone));
        } else {
            activeZone = 1;
            $('.HP-hero li:first-child').fadeIn('normal', heroNavHighlight(activeZone));
        }
        $(this).hide();
    });
};
4

2 に答える 2

0

アニメーションを停止するには、を使用できますがjquery、.stop()問題が解決するかどうかはわかりません（視覚化されていません）が、試してみることができます

$('.HP-hero li').stop(1,1); // or try $('.HP-hero li').stop()
window.clearInterval(intvl);

say2joe言ったようclearIntervalに、それは関数が次回呼び出すのを止めるだけですが、現在のキューをクリアしないので（彼は正しいです）、その場合stopに使用できます。

ストップについて。

于 2012-07-26T23:00:52.953 に答える
0

heroTransitionNext 関数が実行している作業の量によっては、間隔がクリアされてもまだ実行されている場合があります。つまり、間隔をクリアすると、関数の呼び出しが停止しますが、関数のインスタンスメモリ内での実行は、終了するまで実行を続けます。

より明確にするために、使用例を次に示します (これは、Firebug または開発者ツールのプロファイラーを使用して自分で確認できます)。

heroTransitionNext の実行時間は 2.1 秒です。clearInterval は、setInterval が呼び出されてから 6.1 秒後に呼び出されます。6.1 秒で、heroTransitionNext が 4 回呼び出されています。最初の 3 つの実行は完了していますが、4 番目の実行は実行が終了するまで完了しません (setInterval が呼び出されてから 8.1 秒後)。注: この使用例では、最後の呼び出しの実行がまだ続いている間に (さらに 100 ミリ秒)、連続する各呼び出しが実行されます。つまり、2 から 2.1、4 から 4.1、および 6 から 6 への実行オーバーラップがあります。 6.1秒間隔。

設定された間隔よりも関数の実行に時間がかかる場合は、setTimeout() で再帰関数を使用します。次のリンクは良い例です。

また、説明の良いリファレンスはhttps://developer.mozilla.org/en/DOM/window.setIntervalです。

于 2012-07-26T22:34:56.673 に答える