javascript - Restarting a setInterval() in Javascript/jQuery (without clearInterval)

Question

I'm working on ui tabs built using jQuery. Everything works except for one issue - I did a setInterval that runs a function that does a trigger("click") so that it goes to the next tab after 5000 miliseconds. It runs through each tab fine, the issue is that if the user manually clicks on a tab, the timer for the setInterval does not restart back at 0. For example if a user were to start on tab1 at 0 miliseconds and clicks on tab2 at 2000 miliseconds, the setInterval doesn't go back to 0, it would start at 2000 and run to 5000 miliseconds and would subsequently goto tab3. I understand why it's happening, I just wonder if there were a way to restart the setInterval timing without having to do a clearInterval() and creating an entirely new setInterval(). Any insight would be appreciated.

Update

Thanks for the replies - The reason I was trying to avoid using clearInterval was because I was having issues of how to write the code in a way where the clearInterval would stop the setInterval completely. The code is setup to track whenever a user has clicked a tab. The problem is the auto change function utilizes trigger('click'), so it runs the clearInterval function I wrote also when the tabs auto-change. It seems to run fairly fine on its own, but once the user starts clicking on tabs, the setInterval behaves unusually and switches tabs unpredictably. I suspect what is happening is that several setIntervals are running at once... Here's the code (If you haven't guessed it already, I'm pretty new at javascript/jquery). I've commented out parts so that it's functional, but it still doesn't function as I intended (from first post).

// auto change tabs
            if( options.interval ) {

                function timerCom() {
                    if( !$(".controller").hasClass('paused') ) {
                        var i = $(".tab-current > a").attr("rel");
                        //alert(i);
                        if( i == 3 ) {i = 0};
                        $container
                            .find('a')
                            .eq(i)
                            .trigger('click');
                    }    
                }

                //$("#promo-items > li > a").click(function () {
                    //var timer;
                    //if( timer != null ) {clearInterval(timer);}
                    timer = setInterval(timerCom, options.interval);

                //});

            }

score 8 · Accepted Answer

いいえ、タイマーsetIntervalをクリアせずにで設定したタイマーを再開する方法はありません。

score 4 · Accepted Answer

間隔やタイムアウトを実際に変更することはできません。クリアするだけです。そうは言っても、間隔をクリアし、新しいが同一の関数を新しい時間値ですぐに開始する関数を作成するのは簡単なことです。

var intervalID;
var resetTimer = function() {
  if (intervalID) { clearInterval(intervalID) };
  intervalID = setInterval(function() {
    console.log('doing stuff!');
  }, 5000);
};

score 1 · Accepted Answer

1

timer = setInterval(function() {
  timerCom();
}, options.interval);

于 2011-02-22T21:23:50.827 に答える

score 0 · Accepted Answer

この投稿が 2 年以上前のものであることはわかっていますが、ちょうど今、同様の問題に遭遇し、解決策を見つけました。

一定時間後に次の画像に自動的に移動する画像スクローラーを作成していましたが、ナビゲーションボタンをクリックするたびにトランジションが 2 回移動しました。

これが私の解決策です：

間隔変数（timerあなたの場合）をややグローバルにします。

つまり、optionsセクション (以前に定義され、後で割り当てられたと仮定) で、nulltimer変数を追加します。

var options = {
'interval',
//Other variables
'timer',
};

次に、clearIntervalクリックイベントを処理するときに 2 回呼び出します。

$("#promo-items > li > a").click(function () {

if( options.timer != null ) {
clearInterval(options.timer);
clearInterval(options.timer);
}

options.timer = setInterval(timerCom, options.interval);

});

私にとって魅力のように働きました。

繰り返しますが、これが遅すぎる場合は申し訳ありません。

javascript - Restarting a setInterval() in Javascript/jQuery (without clearInterval)

4 に答える 4

Related

Reference