Restablecer un setTimeout

161

Tengo lo siguiente:

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

¿Cómo puedo, mediante una función .click, restablecer el contador a la mitad de la cuenta regresiva?

javascript jquery Jason
fuente
Probablemente pueda usar una implementación de eliminación de rebotes existente.
AturSams

Respuestas:

264

Puede almacenar una referencia a ese tiempo de espera y luego invocar clearTimeoutesa referencia.

// 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
fuente
2
Tan extraño que no hay un .clear()objeto de tiempo de espera en sí mismo.
Automatico
16
@ Cort3z es porque window.setTimeoutdevuelve un número (la identificación del temporizador) y no un "objeto de tiempo de espera".
Dan O
2
Sí @DanO: extraño que setTimeout no devuelva un objeto Timeout. En un contexto NodeJS lo hace.
Ki Jéy
25

clearTimeout () y alimenta la referencia de setTimeout, que será un número. Luego vuelva a invocarlo:

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

En este ejemplo, si no hace clic en el elemento del cuerpo en 5 segundos, el color de fondo será negro.

Referencia:

Nota: setTimeout y clearTimeout no son métodos nativos de ECMAScript, sino métodos Javascript del espacio de nombres de la ventana global.

meder omuraliev
fuente
9

Deberá recordar el tiempo de espera "Temporizador", cancelarlo y luego reiniciarlo:

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
fuente
1
Es interesante que esta opción haya sido ignorada. Todos los demás parecen requerir que la función interna del temporizador se duplique, lo cual es menos que seco y doloroso si hay más de unas pocas líneas de código para mantener dos veces ...
brianlmerritt
8 
var myTimer = setTimeout(..., 115000);
something.click(function () {
    clearTimeout(myTimer);
    myTimer = setTimeout(..., 115000);
});

Algo en ese sentido!

Deniz Dogan
fuente
2

Este temporizador activará un cuadro de alerta "Hola" después de 30 segundos. Sin embargo, cada vez que hace clic en el botón de reinicio del temporizador, borra el timerHandle y luego lo restablece nuevamente. Una vez que se dispara, el juego termina.

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

Aquí hay un ejemplo elaborado de lo que realmente sucede en http://jsfiddle.net/ppjrnd2L/

Biskrem Muhammad
fuente
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
fuente
1

Para restablecer el temporizador, deberá configurar y borrar la variable del temporizador

$time_out_handle = 0;
window.clearTimeout($time_out_handle);
$time_out_handle = window.setTimeout( function(){---}, 60000 );
Anwasi Richard Chibueze
fuente
25
Argh, aconsejo no usar nombres de variables de estilo php en javascript. Sí, funcionará, pero Dios mío, es confuso.
psynnott
0

Sé que este es un hilo viejo pero se me ocurrió esto hoy

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
}

e invocas usando

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