Réinitialiser un setTimeout


161

J'ai ce qui suit:

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

Comment puis-je, via une fonction .click, réinitialiser le compteur à mi-parcours du compte à rebours?


Vous pouvez probablement utiliser une implémentation anti-rebond existante.
AturSams

Réponses:


264

Vous pouvez stocker une référence à ce délai, puis appeler clearTimeoutcette référence.

// 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
Tellement étrange qu'il n'y a pas d' .clear()objet timeout lui-même.
Automatico

16
@ Cort3z c'est parce que window.setTimeoutrenvoie un nombre (l'ID du minuteur) et non un "objet timeout".
Dan O

2
Oui @DanO: étrange que setTimeout ne renvoie pas d'objet Timeout. Dans un contexte NodeJS, c'est le cas.
Ki Jéy

25

clearTimeout () et alimente la référence de setTimeout, qui sera un nombre. Puis ré-invoquez-le:

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

Dans cet exemple, si vous ne cliquez pas sur l'élément du corps dans les 5 secondes, la couleur d'arrière-plan sera noire.

Référence:

Remarque: setTimeout et clearTimeout ne sont pas des méthodes natives ECMAScript, mais des méthodes Javascript de l'espace de noms de la fenêtre globale.


9

Vous devrez vous souvenir du timeout "Timer", l'annuler, puis le redémarrer:

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
Intéressant que cette option ait été ignorée. Les autres semblent tous nécessiter la duplication de la fonction interne de la minuterie, ce qui est moins que sec et douloureux s'il y a plus de quelques lignes de code à maintenir deux fois ...
brianlmerritt

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

Quelque chose de ce genre!


2

Cette minuterie déclenchera une boîte d'alerte "Bonjour" après 30 secondes. Cependant, chaque fois que vous cliquez sur le bouton de réinitialisation du minuteur, il efface le timerHandle, puis le réinitialise à nouveau. Une fois qu'il est tiré, le jeu se termine.

<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>

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

voici un exemple élaboré de ce qui se passe réellement sur 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

Pour réinitialiser la minuterie, vous devez définir et effacer la variable de minuterie

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

25
Argh, je déconseille d'utiliser des noms de variables de style php en javascript. oui, ça marchera, mais mon Dieu, c'est déroutant.
psynnott

0

Je sais que c'est un vieux fil mais je suis venu avec ça aujourd'hui

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
}

et vous invoquez en utilisant

afterTimer('<timername>string', <interval in milliseconds>int, function(){
   your code here
});
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.