jQuery Fade объект после 20 секунд бездействия

Question

Я хочу исчезнуть из div, если пользователь не сделал щелчок мышью в течение 20 секунд.

У меня есть следующий код:

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

Проблема в том, что я не знаю, как сбросить setTimeout после обнаружения щелчка мышью.

Спасибо!

Answer 1

Метод .setTimeout () фактически возвращает ссылку на timer , который он создает. Эту ссылку можно использовать в .clearTimeout для остановки таймера до его запуска.

Вот пример того, как использовать это:

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

Использовать функцию задержки.

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

Каждый клик перезапускается через 6 секунд, после того как он исчезает .main-popup2, если нет

Answer 3

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