防止多次点击识别符

Question

I have this code:

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

Where as you see, on the click of the specified element, I'm going to fade in a span#message before the div, wait 5 seconds and then fade out the span.

I tried adding stop() before the fadein but this helps only to prevent multi-animations on click, what I need is a way to prevent multi-delays on click, because an user, when try to click the specified element, will see the span fading every 5 seconds as the number of clicks on the specified element.

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

Answer 1

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

If you pass in true to the stop() , it will jump past any queued animations, and they will be ignored.

 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>