SetTimeout zurücksetzen

159

Ich habe folgendes:

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

Wie kann ich über eine .click-Funktion den Zähler in der Mitte des Countdowns zurücksetzen?

javascript jquery Jason
quelle
Sie können wahrscheinlich eine vorhandene Debounce-Implementierung verwenden.
AturSams

Antworten:

260

Sie können einen Verweis auf dieses Zeitlimit speichern und dann clearTimeoutdiesen Verweis aufrufen .

// 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(...);
bdukes
quelle
2
So seltsam, dass .clear()das Timeout-Objekt selbst kein Objekt enthält.
Automatico
16
@ Cort3z Das liegt daran, dass window.setTimeouteine Nummer (die ID des Timers) und kein "Timeout-Objekt" zurückgegeben wird.
Dan O
2
Ja @DanO: Seltsam, dass setTimeout kein Timeout-Objekt zurückgibt. In einem NodeJS-Kontext ist dies der Fall.
Ki Jéy
25

clearTimeout () und geben Sie die Referenz des setTimeout ein, das eine Zahl sein wird. Rufen Sie es dann erneut auf:

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()
}

Wenn Sie in diesem Beispiel nicht innerhalb von 5 Sekunden auf das Körperelement klicken, ist die Hintergrundfarbe schwarz.

Referenz:

Hinweis: setTimeout und clearTimeout sind keine nativen ECMAScript-Methoden, sondern Javascript-Methoden des globalen Fensternamensraums.

meder omuraliev
quelle
9

Sie müssen sich das Timeout "Timer" merken, es abbrechen und dann neu starten:

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();
}
Frank Krueger
quelle
1
Interessant, dass diese Option ignoriert wurde. Die anderen scheinen alle zu verlangen, dass die interne Funktion des Timers dupliziert wird, was weniger als trocken und schmerzhaft ist, wenn mehr als ein paar Codezeilen zweimal gepflegt werden müssen ...
brianlmerritt
8 
var myTimer = setTimeout(..., 115000);
something.click(function () {
    clearTimeout(myTimer);
    myTimer = setTimeout(..., 115000);
});

Etwas in diese Richtung!

Deniz Dogan
quelle
2

Dieser Timer löst nach 30 Sekunden eine "Hallo" -Alarmbox aus. Jedes Mal, wenn Sie auf die Schaltfläche zum Zurücksetzen des Timers klicken, wird der TimerHandle gelöscht und dann erneut zurückgesetzt. Sobald es abgefeuert ist, endet das Spiel.

<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
quelle
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();

Hier ist ein ausführliches Beispiel dafür, was wirklich los ist: http://jsfiddle.net/ppjrnd2L/

Biskrem Muhammad
quelle
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])} );

    })();

});
andres descalzo
quelle
1

Um den Timer zurückzusetzen, müssten Sie die Timer-Variable einstellen und löschen

$time_out_handle = 0;
window.clearTimeout($time_out_handle);
$time_out_handle = window.setTimeout( function(){---}, 60000 );
Anwasi Richard Chibueze
quelle
25
Argh, ich rate davon ab, Variablennamen im PHP-Stil in Javascript zu verwenden. Ja, es wird funktionieren, aber mein Gott, es ist verwirrend.
Psynnott
0

Ich weiß, dass dies ein alter Thread ist, aber ich habe mir das heute ausgedacht

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
}

und Sie rufen mit auf

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