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?

javascript jquery Jason
la source
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(...);
bdukes
la source
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.

meder omuraliev
la source
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();
}
Frank Krueger
la source
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!

Deniz Dogan
la source
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>
kaleazy
la source
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/

Biskrem Muhammad
la source
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
la source
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 );
Anwasi Richard Chibueze
la source
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
});
Clint
la source