Question

var messageSpan;
function createFlashMessage = function(message, type, time) {
    messageSpan || (messageSpan = $("<span>").hide().appendTo("body"));
    messageSpan && (messageSpan.stop().removeClass().addClass("message-mask  label"));
    messageSpan.html(message).addClass("label-" + (type || "success"));
    var left = Math.abs($(document).width() / 2 - (messageSpan.width() + 30) / 2);
    messageSpan.css({
        left: left + 'px'
    }).fadeIn(200, function() {
        $(this).delay(time || 5000).fadeOut();
    });
};

It worked but is not what I expect.

The first time call this function is normal,but when you call it when it is running,you will find that the message span will fadeOut(with the new message) and fadeIn again.

This is not what I want,I just want that if it is called when running,just replace the text with new message,and re-caculate the time(a new 5s).

How to fix it?

It seems that this is related to the jquery animation timer mechanism,can anybody do me a favor?

Answer 1

.delay() doesn’t play well when clearing queues.

.stop(true,true)

Using messageSpan.stop(true,true) instead of messageSpan.stop(). Will jump the animation to the end immediately and it will clear any queued animations. This will happen usually so fast that the user won’t notice it.

setTimeout & clearTimeout

This is what I think the best way to go.

var messageSpan;
var createFlashMessage = function(message, type, time) {
  messageSpan || (messageSpan = $("<span>").hide().appendTo("body"));
  messageSpan && clearTimeout(messageSpan.data("timeout"));
  messageSpan && (messageSpan.stop(true,true).removeClass().addClass("message-mask  label"));
  messageSpan.html(message).addClass("label-" + (type || "success"));
  var left = Math.abs($(document).width() / 2 - (messageSpan.width() + 30) / 2);
  messageSpan.css({
    left: left + 'px'
  }).fadeIn(200, function() {
    messageSpan.data("timeout", setTimeout(function(){
      messageSpan.fadeOut();
    }, time || 5000));
  });
};