JQuery Fade object after 20 seconds of inactivity

Question

I want the div to disappear if the user has not clicked the mouse for 20 seconds.

I have the following code:

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

The problem is that I do not know how to reset setTimeout after detecting a user click.

Thanks!

Answer 1

Method . setTimeout () actually returns a reference to the timer it creates. This link can be used in .clearTimeout to stop the timer before executing it.

Here is an example of how to use it:

 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); }): 

Answer 2

 var timeout = null; var fadeElement = $('.main-popup2'); function fader() { if(null !== timeout) { clearTimeout(timeout); } fadeElement.stop(); timeout = setTimeout(function () {fadeElement.fadeOut('fast');}, 2000); } $(document).click(fader); fader(); 

Answer 3

Use the delay function.

 (window).click(function () { $('.main-popup2').delay(6000).fadeOut(300); } 

Each click restarts 6 seconds after it starts .main-popup2, if not