防止多次延迟点击识别器

Question

我有这个代码：

$(element).on('click', function() {
$this.closest('div').before('<span id="message" style="display:none"></span>');
$('#message').fadeIn().delay(5000).fadeOut();

如您所见，在单击指定元素时，我将在div之前淡入span#消息，等待5秒，然后淡出span。

我试着在渐变元之前添加stop((，但这只有助于防止点击时出现多动画，我需要的是一种防止点击时多延迟的方法，因为当用户尝试点击指定元素时，会看到跨度每5秒就会随着点击指定元素的次数而变淡。

Fiddle：https://jsfiddle.net/43z78dk6/

Answer 1

http://api.jquery.com/stop/

如果将true传递给stop()，它将跳过任何排队的动画，它们将被忽略。

var $element = $('button');
$element.closest('div').before('<span id="elementFade" style="display:none">You clicked him!</span>');
$element.on('click', function() {
//pass in true to end all queued animations
//you can click all you want
$('#elementFade').stop(true).fadeIn().delay(5000).fadeOut();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button>You know you want to click me</button>
</div>