Question

我正在使用Firebase child_added来监视添加到我的数据库中的新条目。

它似乎工作了一段时间，但后来我注意到一些问题，让连接空闲。如果我在Firebase返回重复项时长时间打开我的应用程序。我认为这可能取决于连接被丢弃然后建立。

这是我的代码。

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('<ul class="collapsible" data-collapsible="accordion"></ul>')
    }

        var output = '<li>';
        output +=  '<div class="collapsible-header"><i class="material-icons">filter_drama</i>'+callerID+'</div>';      
        output += '<div class="collapsible-body">';
        output += '<p><audio id="source" controls>';            
        output += '<source src="'+audioURL+'" type="audio/mpeg">';
        output += '</audio></p>';
        output += '<p>'+timeReceived+'</p>';
        output += '<p>'+transcription+'</p>';   
        output += '</div>';     
        output += '</li>';
        $('.collapsible').append(output);
        $('.collapsible').collapsible();
},

Answer 1

如果我正确理解了您的问题，那么我会遇到过几次问题。我相信诀窍是.empty()来自.on电话中的现有数据。

例如，在我的网站上，我们有用户可以添加的目标。当他们添加新的目标时，.on调用会在其列表底部添加新的目标。

我遇到了一个问题，即删除目标会复制UI数据。

为了解决这个问题，我将$(#goals").empty();移到.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. e.g. $("#goals").append("</div>");
  });

我怀疑这样做会强制所有相关的UI项目重新加载，但他们不会。如果我添加目标，它会弹出列表底部，如果我删除了目标，则只需删除目标而不重新加载或重复。

因此，在您的情况下，您需要在$('.collapsible').empty();电话之后和.on之前添加var voicemail = snapshot.val();。

注意：之前我会在$("#goals").empty()来电之前致电.on。

Firebase child_added事件侦听器返回重复数据

1 个答案: