20 초 동안 사용하지 않으면 jQuery 페이드 객체

Question

사용자가 마우스를 클릭하지 않은 경우 div를 페이드 아웃하려면을 20 초 동안 누릅니다.

나는 다음과 같은 코드가 있습니다 :

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

문제는 내가 사용자의 마우스 클릭을 검출 한 후에서는 setTimeout을 재설정하는 방법을 모르는 것입니다.

감사합니다.

Answer 1

.setTimeout() 메서드는 실제로 타이머에 대한 참조를 반환합니다. 이 참조는 .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

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

사용 지연 기능 : 여기

이를 사용하는 방법의 예입니다.

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

클릭 할 때마다 다시 시작 6 초 없다