Javascript 重复JS函数的最佳方法

有时调用此函数的速度太快，会创建多个元素，但由于它使用的ID不是每个实例的唯一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();
    });
}

document.triggerNotification=函数（类型、消息）{
jQuery（document.body）.append（“+message+”）；
jQuery（“#通知”）.delay（1500）.fadeOut（1200，函数（）{
jQuery（“#通知”）.remove（）；
});
}

给他们唯一的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();
    });
}

var notificationCount=0；
document.triggerNotification=函数（类型、消息）{
notificationCount++；
var notificationId=“notification”+notificationCount；
jQuery（document.body）.append（“+message+”）；
jQuery（'#'+notificationId）.延迟（1500）.衰减（1200，函数（）{
jQuery（“#”+notificationId）.remove（）；
});
}

给他们唯一的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();
    });
}

var notificationCount=0；
document.triggerNotification=函数（类型、消息）{
notificationCount++；
var notificationId=“notification”+notificationCount；
jQuery（document.body）.append（“+message+”）；
jQuery（'#'+notificationId）.延迟（1500）.衰减（1200，函数（）{
jQuery（“#”+notificationId）.remove（）；
});
}

有几个选项：

通过添加一个不断增加的数字（例如），使您的ID唯一

使用一个新类作为您感兴趣的行的指示器，然后使用“.notificationID”-样式选择器附加淡出

有两种选择：

通过添加一个不断增加的数字（例如），使您的ID唯一

使用一个新类作为您感兴趣的行的指示器，然后使用“.notificationID”-样式选择器附加淡出

---

只缓存您创建的元素，不需要ID

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();
    });
}

功能（类型、消息）{
var el=$（“”+消息+“”）；
jQuery（document.body）.append（el）；
el.延迟（1500）.衰减（1200，功能（）{
el.移除（）；
});
}

只需缓存您创建的元素，无需ID

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();
    });
}

功能（类型、消息）{
var el=$（“”+消息+“”）；
jQuery（document.body）.append（el）；
el.延迟（1500）.衰减（1200，功能（）{
el.移除（）；
});
}

与使用ID作为句柄来设置/删除通知动画不同，您可以简单地将其创建为函数调用中的变量，从而提供删除通知的方法。大概是这样的：

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);
};

document.triggerNotification=函数（类型、消息）{
var通知=$（“”+消息+“”）；
jQuery（document.body）.append（通知）；
setTimeout（函数（）{
通知。淡出（1200，函数（）{
通知。删除（）；
})
}, 1500);
};

此外，我认为在这种情况下，

setTimeout

比

.delay（）

更合适。虽然它们都可以工作，

.delay（）

用于多个动画的排队<在这种情况下，code>setTimeout就足够了，因为您只调用一个动画。请参阅此处的文档：

最后，这里是我提供的代码的工作演示：

---

单击按钮可以看到，您可以获得任意数量的通知，通知将按添加顺序淡出。

您可以在函数调用中简单地将其创建为变量，而不是使用ID作为句柄来设置/删除通知的动画。大概是这样的：

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);
};

document.triggerNotification=函数（类型、消息）{
var通知=$（“”+消息+“”）；
jQuery（document.body）.append（通知）；
setTimeout（函数（）{
通知。淡出（1200，函数（）{
通知。删除（）；
})
}, 1500);
};

此外，我认为在这种情况下，

setTimeout

比

.delay（）

更合适。虽然它们都可以工作，

.delay（）

用于多个动画的排队<在这种情况下，code>setTimeout就足够了，因为您只调用一个动画。请参阅此处的文档：

最后，这里是我提供的代码的工作演示：

---

您可以通过单击按钮看到，您可以获得任意数量的通知，通知将按添加顺序淡出。

完全不需要ID（请参见我的答案）。有时您会逐字逐句地阅读问题。你的方法赢了！根本不需要ID（见我的答案），有时你会逐字逐句地阅读这个问题。你的方法赢了！这是最好的解决办法。另外，我还要指出，在这种情况下，setTimeout比delay更合适。延迟对于排队的fx更合适，但是因为您将只在元素上执行一个动画，所以setTimeout就足够了。这是最好的解决方案。另外，我还要指出，在这种情况下，setTimeout比delay更合适。延迟对于排队的fx更合适，但由于您将只在元素上执行一个动画，因此setTimeout就足够了。