사용자가 버튼을 클릭하면

Question

delay.fadeout jQuery를 다시 시작하는 방법, 우리는 않는

$('#element').show().delay(5000).fadeOut(); 

들은 5 초 이내에 버튼을 클릭하면, 우리는 효과를 다시 시작하고 싶지만, 그것을 지금 기록 된대로 , 첫 번째 효과는 완료되고 두 번째 효과는 발생하지 않습니다. 공식 문서에 따라

Answer 1

당신은 즉시 완료 이전 작업 플레이를 만들기 위해 finish()를 사용할 수 있습니다. Ref. 동작을 기대했던 http://api.jquery.com/finish/

$('#target').on('click', function(){ 
 
    $('#element').finish().show().delay(5000).fadeOut(); 
 
});

#element { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="target">Do It</button> 
 
<div id="element">Element</div>

Answer 2

, https://api.jquery.com/delay/는, 지연은 취소 할 수 없습니다 :

.delay() 메소드는 대기 jQuery를 효과 사이의 지연에 가장 적합합니다. 제한적이기 때문에 예를 들어 지연을 취소 할 수있는 방법을 제공하지 않습니다. -delay()는 특정 사용에 더 적합 할 수있는 JavaScript의 기본 setTimeout 함수를 대신하지 않습니다. 사례.

는 대신 시간 제한을 사용할 수 있습니다

var myTimer; 
 
$('#stop').on('click', function(){ 
 
    $('#tohide').show(); 
 
    clearTimeout(myTimer); 
 
}); 
 
$('#show').on('click', function(){ 
 
    $('#tohide').show(); 
 
    myTimer = setTimeout(function(){$('#tohide').fadeOut();}, 2000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<button id="tohide" style="display:none">to hide</button> 
 
<button id="stop">stop</button> 
 
<button id="show">show</button>