Firebase child_added 创建重复项答案

【问题标题】：Firebase child_added creates duplicatesFirebase child_added 创建重复项
【发布时间】：2013-09-26 03:57:51
【问题描述】：

我正在使用 Firebase 开发一个 HTML5 移动消息应用程序。我遇到了一个我无法解决的问题。该应用程序有多个频道（聊天室）。当一条消息第一次添加到一个频道时，它会按预期工作，但是当我转到另一个频道并向该频道发布一条新消息时，我会返回上一个频道并发布另一条消息，我会得到上次发布的重复消息信息。当我重新加载页面时，重复项消失了，但我不想显示重复项。以下是我的代码：

function loadChatMessages(channelID) {
    $('#chatMessages').html('');
    var msgObj = {};
    var channelRef = globals.channelsBase + '/' + channelID + '/messages';

    var channelMessages = new Firebase(channelRef);
    channelMessages.on('child_added', function (snapshot) {
        msgObj = snapshot.val();
        var id = snapshot.name().toString();

            var messageTime = application.Functions.renderTime(msgObj.messageTime);
            var tails = '<div class="message-tails-wrap"><div class="message-tails"></div></div>';
            var html = '<li class="chatEl ' + sentByClass + '" id="'+id+'">';
            html += tails;
            html += msgObj.message;
            html += '<span class="sender"> ' + by + ' </span> <span class="tmp-recipient"> ' + msgObj.recipient + ' </span>';
            html += '<span class="time-stamp msg-time" >';
            html += messageTime;
            html += '</span></li>';
            $(html).appendTo('#chatMessages');

        /// TODO: TEMP solution!
        var prevID = 0;
        $('#chatMessages li').each(function(n) {
            var id = $(this).attr('id');
            if(id == prevID){
               // console.log(id + ' is a duplicate. Remove it');
                this.remove(); // the necessary evil....                 
            }
            prevID = id;
        });

    });

}

【问题讨论】：

我会设置断点或添加 console.log 以确保您的 .on('child_added', ...) 调用不会多次运行。
感谢您的建议。我已经试过了。 on('child_added,...) 在频道首先加载时被调用多次，然后在添加新消息时被调用。这是意料之中的。当我将消息添加到不同的频道然后加载我的上一个频道时，问题就开始了。然后，当我添加一条新消息时， on('child_added,...) 会被调用两次。
是的，那是因为 .on("child_added") 被调用了两次。您需要确保在为新频道添加新侦听器之前调用 .off("child_added")。

标签： firebase

【解决方案1】：

听起来您每次进入房间时都运行loadChatMessages()，并且当您的用户在房间中移动时，您会看到对on('child_added' 回调的重复调用。

这是因为您每次重新进入房间时都会添加一个新的回调。要解决此问题，请在用户离开房间时进行一些清理。在该清理函数中，确保使用 .off("child_added") 删除旧的侦听器。

【讨论】：

【解决方案2】：

事件：

YOURREF.limitToLast(1).on('child_added', function (OBJECTADDED){
    console.log(OBJECTADDED.key(), OBJECTADDED.val());
});

你可能认为上面的代码会被触发一次，这是不正确的。上面的 console.log 将被触发两次，一次在添加新对象之前将 OBJECTADDED 作为引用 YOURREF 中的最后一个对象，另一次使用新对象。

【讨论】：