Question

I want to call setTimeout() after a click occurs.

If the user clicks again before 300ms has passed, I want to stop that timer, fire off another function and restart the original timer.

I know about setTimeout() but I’m not sure how to approach this problem.

Answer 1

JavaScript:

myTimeout = setTimeout(function() {
                // this will fire in 300ms if you don't perform some other action!
          },300); 

document.getElementById("button").click = function() {
   // button clicked, stop the timeout
   clearTimeout(myTimeout);
};

HTML:

<button id="button">Click me</button>

The setTimeout starts the 300ms timer. the click handler binds a click event to a button on the page that, when clicked, will stop the timer by using clearTimeout.

When you call setTimeout, assign it to a variable. Then you can use that variable to stop the timer later by calling clearTimeout.

You can use the same technique with any event, like keypress, mouseover events, button or DOM element clicks, and many more.

Note that the same procedure also applies to setInterval.

myInterval = setInterval(function() {
               // do stuff every 300ms
             },300);

clearInterval(myInterval);  // stop the interval

With addEventListener:

function start() {
    window.addEventListener("click", function() { 
        timeout = setTimeout(function() {
            // do stuff after 300ms after the first click
            clearTimeout(timeout);
            start();
        }, 300)
    }, false);
}

The above should bind a global click listener on the page and clear and restart the timer recursively after a click. The listener stops if there are no clicks though, but this should get you started.