Resetting a setTimeout

I have the following:

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

How can I, via a .click function, reset the counter midway through the countdown?


You can store a reference to that timeout, and then call clearTimeout on that reference.

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

clearTimeout() and feed the reference of the setTimeout, which will be a number. Then re-invoke it:

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

In this example, if you don't click on the body element in 5 seconds the background color will be black.

Reference:

  • https://developer.mozilla.org/en/DOM/window.clearTimeout
  • https://developer.mozilla.org/En/Window.setTimeout

Note: setTimeout and clearTimeout are not ECMAScript native methods, but Javascript methods of the global window namespace.