防止点击标识符的多次延迟

Question

我有这个代码：

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

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

我尝试在 fadein 之前添加 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>

防止点击标识符的多次延迟

Prevent multi delays on click of identificator

javascript

jquery

delay