Meilleure méthode pour répéter la fonction JS

Question

Parfois, cette fonction peut être appelée trop rapidement et plusieurs éléments sont créés, mais puisqu'elle utilise un ID qui n'est pas propre à chaque instance, la partie à masquer et supprimer la div s'applique uniquement au niveau supérieur. élément, pas tous. Donc, je me retrouve avec un tag div statique qui ne s'estompe pas/suppression.

La meilleure chose que je puisse penser est de simplement répéter le processus. Comment est-ce que je fais cela, ou y a-t-il une meilleure méthode?

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

cache juste l'élément que vous créez, pas besoin de 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

Que diriez-vous de leur donner des ID uniques?

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

deux options:

1. Faire unique de votre ID en ajoutant un nombre toujours croissant (par exemple).
2. Utilisez une nouvelle classe comme indicateur des lignes qui vous intéressent, puis joignez le fadeOut avec le sélecteur de style ".notificationID".

Answer 4

Plutôt que d'utiliser une carte d'identité comme la poignée pour animer/retirer de la notification, vous pouvez simplement le créer comme une variable dans votre fonction appel, vous donnant ainsi un moyen de l'enlever. Quelque chose comme ceci:

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

De plus, je pense que dans ce cas setTimeout est plus approprié que .delay(). Bien qu'ils fonctionneront tous les deux, .delay() est destiné à être utilisé dans la mise en file d'attente de plusieurs animations. setTimeout suffit amplement dans ce cas, puisque vous n'appelez qu'une seule animation. Consultez la documentation ici: http://api.jquery.com/delay/

Enfin, voici une démonstration de travail du code que j'ai fourni: http://jsfiddle.net/WqwsN/

Vous pouvez voir en cliquant sur le bouton que vous pouvez obtenir autant de notifications que vous le souhaitez, et ils disparaître dans l'ordre où ils ont été ajoutés.