重复JS函数的最佳方法

Question

有时调用这个函数太快，会创建多个元素，但由于它使用的ID对每个实例都不是唯一的，所以淡出和删除div的部分只适用于顶级元素，而不是所有元素。因此，我最终得到了一个不会淡出/删除的静态div标记。

我能想到的最好的办法就是简单地重复这个过程。我该怎么做，或者有没有更好的方法？

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

只需缓存您创建的元素，不需要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 2

给他们唯一的ID怎么样？

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 3

有几个选项：

1. 通过追加一个不断增加的数字来使您的ID唯一(例如)。
2. 使用一个新类作为您感兴趣的行的指示器，然后使用".notificationID"-style选择器附加fadeOut。