Écouteur d’événement_added Firebase renvoyant des données en double
J’utilise child_added dans Firebase pour surveiller les nouvelles entrées ajoutées à ma firebase database.
Cela a semblé fonctionner pendant un moment, mais j’ai remarqué quelques problèmes lorsque je laissais la connexion inactive. Si je laisse mon application ouverte pendant une période prolongée lorsque Firebase renvoie les doublons. Je pense que c’est peut-être dû au fait que la connexion est abandonnée puis établie.
Voici mon code.
getVoicemailList: function() { var self = this; var userId = firebase.auth().currentUser.uid; firebase.database().ref('voicemails/' + userId).on('child_added', function(snapshot) { var voicemail = snapshot.val(); self.addToCollection(voicemail.callerID, voicemail.timeReceived, voicemail.transcription, voicemail.audioURL); }); }, addToCollection: function(callerID, timeReceived, transcription, audioURL) { console.log(callerID) var collectionList = $('.collapsible').length; if(!collectionList) { $('#main-content').append('
') } var output = ''; output += 'filter_drama'+callerID+''; output += ''; output += '- Duplication de lignes dans la table Javascript
- Uncaught ReferenceError: n’est pas défini à HTMLTableRowElement.onclick
- Firebase: Uncaught TypeError: Impossible de lire la propriété ‘signInWithEmailAndPassword’
- Comment puis-je confirmer que la notification de base de feu a bien été envoyée (fcm)?
- Mettre à jour FullCalendar avec Firebase sur un nouvel événement
'; output += ''+timeReceived+'
'; output += ''+transcription+'
'; output += ''; output += ' '; $('.collapsible').append(output); $('.collapsible').collapsible(); },
- Tables de données et Web Firebase
- Supprimer un object de Firebase à l’aide de JavaScript
- Comment implémenter une image popup dans jQuery pour Firebase
- Itération dans des objects de base de feu nesteds – Javascript
- Créer un nouveau chemin unique vers Firebase Storage, associé à son stockage dans la firebase database?
Si je comprends bien votre problème, alors c’est quelque chose que j’ai rencontré à quelques resockets. Je crois que l’astuce consiste à .empty() les données existantes dans l’appel .on .
Par exemple, sur mon site, nous avons des objectives que les utilisateurs peuvent append. Quand ils ajoutent un nouvel objective, l’appel .on ajoute un nouvel objective au bas de leur liste.
J’avais un problème où la suppression d’un objective dupliquerait alors les données de l’interface utilisateur.
Afin de résoudre le problème, j’ai déplacé $(#goals").empty(); dans l’appel .on .
firebase.database().ref('users/' + user).on('value', function(snapshot) { $("#goals").empty(); // This removes all all previously added goals snapshot.forEach(function(data) { var id = data.key; var desc = data.val().desc; var url = data.val().url || "https://unsplash.it/400?image=" + getRandomNumber(); displayGoal(id,desc,url); }); // If you need to append anything after all the data has been added you can do it here. eg $("#goals").append(""); });
Je pensais que cela obligerait à recharger tous les éléments d’interface utilisateur pertinents, mais ce n’est pas le cas. Si j’ajoute un objective, il apparaît simplement au bas de la liste. Si je supprime un objective, l’interface utilisateur supprime simplement l’objective sans rechargement ni duplication.
Donc, dans votre cas, vous appendiez $('.collapsible').empty(); après l’appel .on et avant la var voicemail = snapshot.val(); .
Remarque: auparavant, j’appelais $("#goals").empty() avant l’appel .on .