setTimeoutのリセット

161

私は以下を持っています：

window.setTimeout(function() {
    window.location.href = 'file.php';
}, 115000);

.click関数を使用して、カウントダウンの途中でカウンターをリセットするにはどうすればよいですか？

javascript jquery

— ジェイソン
ソース

おそらく、既存のデバウンス実装を使用できます。

— AturSams 2017年

264

そのタイムアウトへの参照を保存してから、その参照を呼び出すことができclearTimeoutます。

// in the example above, assign the result
var timeoutHandle = window.setTimeout(...);

// in your click function, call clearTimeout
window.clearTimeout(timeoutHandle);

// then call setTimeout again to reset the timer
timeoutHandle = window.setTimeout(...);

— ブデュークス
ソース

2

奇妙なこと.clear()に、タイムアウトオブジェクト自体には何もありません。

— Automatico

16

@ Cort3z window.setTimeoutは、「タイムアウトオブジェクト」ではなく数値（タイマーのID）を返すためです。

— Dan O

2

はい@DanO：setTimeoutがTimeoutオブジェクトを返さないのは奇妙です。NodeJSコンテキストでは、そうします。

— KiJéy2018

25

clearTimeout（）と、数値になるsetTimeoutの参照をフィードします。次に、それを再度呼び出します。

var initial;

function invocation() {
    alert('invoked')
    initial = window.setTimeout( 
    function() {
        document.body.style.backgroundColor = 'black'
    }, 5000);
}

invocation();

document.body.onclick = function() {
    alert('stopped')
    clearTimeout( initial )
    // re-invoke invocation()
}

この例では、5秒以内にbody要素をクリックしないと、背景色は黒になります。

参照：

注：setTimeoutとclearTimeoutはECMAScriptネイティブメソッドではなく、グローバルウィンドウ名前空間のJavaScriptメソッドです。

— メデルオムラリエフ
ソース

9

タイムアウト「タイマー」を覚えてキャンセルし、再起動する必要があります。

g_timer = null;

$(document).ready(function() {
    startTimer();
});

function startTimer() {
    g_timer = window.setTimeout(function() {
        window.location.href = 'file.php';
    }, 115000);
}

function onClick() {
    clearTimeout(g_timer);
    startTimer();
}

— フランク・クルーガー
ソース

1

興味深いことに、このオプションは無視されています。他のすべては、タイマーの内部関数を複製する必要があるようです。これは、2行を維持するコードが数行以上ある場合、ドライではなく苦痛です...

— brianlmerritt

8

var myTimer = setTimeout(..., 115000);
something.click(function () {
    clearTimeout(myTimer);
    myTimer = setTimeout(..., 115000);
});

それらの線に沿った何か！

— デニズドーガン
ソース

2

このタイマーは30秒後に「Hello」アラートボックスを起動します。ただし、タイマーのリセットボタンをクリックするたびに、timerHandleがクリアされてから、再びリセットされます。発射されると、ゲームは終了します。

<script type="text/javascript">
    var timerHandle = setTimeout("alert('Hello')",3000);
    function resetTimer() {
        window.clearTimeout(timerHandle);
        timerHandle = setTimeout("alert('Hello')",3000);
    }
</script>

<body>
    <button onclick="resetTimer()">Reset Timer</button>
</body>

— Kaleazy
ソース

2

var redirectionDelay;
function startRedirectionDelay(){
    redirectionDelay = setTimeout(redirect, 115000);
}
function resetRedirectionDelay(){
    clearTimeout(redirectionDelay);
}

function redirect(){
    location.href = 'file.php';
}

// in your click >> fire those
resetRedirectionDelay();
startRedirectionDelay();

これは実際に起こっていることの詳細な例ですhttp://jsfiddle.net/ppjrnd2L/

— ビスクレム・ムハンマド
ソース

1

$(function() {

    (function(){

        var pthis = this;
        this.mseg = 115000;
        this.href = 'file.php'

        this.setTimer = function() { 
            return (window.setTimeout( function() {window.location.href = this.href;}, this.mseg));
        };
        this.timer = pthis.setTimer();

        this.clear = function(ref) { clearTimeout(ref.timer); ref.setTimer(); };
        $(window.document).click( function(){pthis.clear.apply(pthis, [pthis])} );

    })();

});

— アンドレスデスカルソ
ソース

1

タイマーをリセットするには、タイマー変数を設定してクリアする必要があります。

$time_out_handle = 0;
window.clearTimeout($time_out_handle);
$time_out_handle = window.setTimeout( function(){---}, 60000 );

— アンワシリチャードチブーゼ
ソース

25

ああ、私はJavaScriptでPHPスタイルの変数名を使用しないことをお勧めします。はい、それはうまくいきますが、私の神、それは混乱しています。

— psynnott 2013年

0

私はこれが古いスレッドであることを知っていますが、今日これを思いつきました

var timer       = []; //creates a empty array called timer to store timer instances
var afterTimer = function(timerName, interval, callback){
    window.clearTimeout(timer[timerName]); //clear the named timer if exists
    timer[timerName] = window.setTimeout(function(){ //creates a new named timer 
        callback(); //executes your callback code after timer finished
    },interval); //sets the timer timer
}

そしてあなたは

afterTimer('<timername>string', <interval in milliseconds>int, function(){
   your code here
});

— クリント
ソース