Question

I want to fade out a div if a user hasn’t made a mouse click for 20 seconds.

I have the following code:

if($('.main-popup2').is(":visible")){
    setTimeout(function() {
        $('.main-popup2').fadeOut('fast');
    }, 20000);
}

Problem is I don’t know how to reset the setTimeout after detecting a user mouse click.

Thanks!

Answer 1

The .setTimeout() method actually returns a reference to the timer it creates. This reference can be used in .clearTimeout to stop the timer before it executes.

Here is an example of how to use this:

var timer;

if($('.main-popup2').is(":visible")){
    // create the timer and save its reference
    timer = setTimeout(function() {
        $('.main-popup2').fadeOut('fast');
    }, 20000);
}

// when clicking somewhere on the page, stop the timer
$(document).click(function() {
    clearTimeout(timer);
}):