ユーザーがボタンをクリックすると

Question

delay.fadeout jqueryのを再起動する方法、我々は、彼らが5秒以内にボタンをクリックした場合、我々は効果を再起動する

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

たいのですが、それが今で書かれているよう、最初のものは完了し、2番目の効果は起こりません。公式ドキュメントに続き

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>