Reset jQuery events when sending a message to the user

Question

I am trying to send a message to the user using jQuery and hide it automatically after a few seconds. This procedure occurs perfectly unless the event occurs in less time than the time to hide the message, causing the message not to arrive synchronized with the event. To perform a test click multiple times on the link to follow the result.

Follow the example:

$('#id').click(function(){

    $("#msg").html('<div class="alert alert-success">ALERTA</div>').hide().fadeIn();
    $("#msg").delay(5000).fadeOut();
  
});

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/dist/css/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a href="#" id="id" class="btn">alerta</a>
<div id="msg"></div>

NOTE: Any other solution to solve this problem is welcome.

Answer 1

You have several options. You can join one .stop() thus: $("#msg").html('<div class="alert alert-success">ALERTA</div>').hide().stop().fadeIn(); and thus interrupts ongoing animations.

$('#id').click(function(){

    $("#msg").html('<div class="alert alert-success">ALERTA</div>').hide().stop().fadeIn();
    $("#msg").delay(5000).fadeOut();
  
});

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/dist/css/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a href="#" id="id" class="btn">alerta</a>
<div id="msg"></div>

Or you can create a flag that prevents new clicks before this fadeOut is over. Like this:

var avisado = false;
$('#id').click(function(){
    if (avisado) return false;
    $("#msg").html('<div class="alert alert-success">ALERTA</div>').hide().fadeIn();
    $("#msg").delay(5000).fadeOut(function(){ avisado = false;});
    avisado = true;  
});

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/dist/css/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a href="#" id="id" class="btn">alerta</a>
<div id="msg"></div>

Another option that the @Wallace suggested is to store this information in the element itself through a property .data(), in which case the code could be:

$('#id').click(function () {
    var self = $(this);
    var avisado = self.data('avisado');
    if (avisado) return false;
    $("#msg").html('<div class="alert alert-success">ALERTA</div>').hide().fadeIn().delay(5000).fadeOut(function () {
        self.data('avisado', false);
    });
    self.data('avisado', true);
});

jsFiddle: http://jsfiddle.net/fepkksm1/1/

Answer 2

Another good way to do it, instead of creating the dynamic div inside the msg, put #msg as the divria itself, hide it and just show it in the click. i preferred to do by css:None display, but you can do by jQuery’s Hide() function.

HTML:

<a href="#" id="id" class="btn">alerta</a>
<div id="msg" class="alert alert-success"> ALERTA </div>

CSS:

#msg{
display:none;
}

jQuery:

$('#id').click(function(){
   $("#msg").show().delay(2000).fadeOut();
});