Best method to repeat JS function

Question

Sometimes this function can be called too quickly and multiple elements are created but since it uses an ID that's not unique to each instance it the part to fade out and remove the div only applies to the top level element, not all of them. So I end up with a static div tag that isn't fading/removing.

The best thing I can think to do is to simply repeat the process again. How do I do that, or is there a better method?

document.triggerNotification = function (type, message) {
    jQuery(document.body).append("<div class='push-notification push-"+type+"' id='notification'>"+message+"</div>");

    jQuery('#notification').delay(1500).fadeOut(1200, function () {
        jQuery('#notification').remove();
    });
}

Answer 1

How about giving them unique IDs?

var notificationCount=0;
document.triggerNotification = function (type, message) {
    notificationCount++;
    var notificationId="notification"+notificationCount;
    jQuery(document.body).append("<div class='push-notification push-"+type+"' id='"+notificationId+"'>"+message+"</div>");

    jQuery('#'+notificationId).delay(1500).fadeOut(1200, function () {
        jQuery('#'+notificationId).remove();
    });
}

Answer 2

A couple of options:

1. Make your ID's unique by appending an ever-increasing number (for example).
2. Use a new class as an indicator of the rows you're interested it, then attach the fadeOut with ".notificationID"-style selector.

Answer 3

Just cache the element you create, no need for ids

function (type, message) {
    var el = $("<div class='push-notification push-"+type+"'>"+message+"</div>");
    jQuery(document.body).append(el);

    el.delay(1500).fadeOut(1200, function () {
       el.remove();
    });
}

Answer 4

Rather than using an ID as the handle to animate/remove the notification, you might simply create it as a variable inside your function call, thus giving you a way to remove it. Something like this:

document.triggerNotification = function(type, message) {
    var notification = $("<div class='push-notification push-" + type + "'>" + message + "</div>");
    jQuery(document.body).append(notification);

    setTimeout(function() {
        notification.fadeOut(1200, function() {
            notification.remove();
        })
    }, 1500);
};

Additionally, I think in this case setTimeout is more appropriate than .delay(). While they will both work, .delay() is intended to be used in the queuing of multiple animations. setTimeout is plenty sufficient in this case, since you're only calling the one animation. See the documentation here: http://api.jquery.com/delay/

Finally, here's a working demo of the code I've provided: http://jsfiddle.net/WqwsN/

You can see by clicking the button that you can get as many notifications as you like, and they will fade out in the order they were added.