Question

在我的应用中，我有一个聊天客户端。左侧div有一个对话列表，右侧div标有#message-content。当用户单击对话时，它会添加一个侦听器，并在message-content部分中生成对话。当他们点击左侧div中的另一个对话时，将擦除右侧div，并使用监听器生成新消息。

问题是，它似乎抓住了听众，所以如果我查看多个会话，然后收到一条消息，它会生成n条消息，其中n是我点击过的会话数量。< / p>

我认为我需要将听众与PREVIOUS对话分开，但我无法弄清楚如何。

这是我在用户点击左侧的li元素时调用的函数，它会清除#message-content并运行：

var displayMessagesDetail = function (uid, chatID) {
    usersRef.child(`${uid}/chats/${chatID}/messages`).on('child_added', function(snapshot) {

        let message = snapshot.val();
        let userClass = (message.user === auth.currentUser.uid ? 
            'message-bubble-self' : 
            'message-bubble-other'
        );

        $('#message-detail-content').append($('<p></p>').addClass(userClass).text(message.text));

    });
};

Answer 1

每次运行displayMessagesDetail时，.on()方法都会创建另一个侦听器。您应该只在聊天开始时运行该功能一次。

或者，您可以在单击其他聊天时停用该侦听器。您可以在.off()上致电usersRef.child(${uid}/chats/${chatID}/messages)，其中chatID和uid与您导航的聊天内容相匹配。这将停止侦听该聊天的任何更新。

使用Firebase单击多个会话时，无法禁用侦听器

1 个答案: