javascript - 使用 Firebase 单击多个对话时无法禁用监听器

Question

在我的应用程序中，我有一个聊天客户端。左侧的 div 包含对话列表，右侧的 div 标记为 #message-content。当用户点击对话时，它会添加一个监听器，并在消息内容部分生成对话。当他们点击左侧 div 中的另一个对话时，右侧的 div 被删除，并生成带有监听器的新消息。

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

我假设我需要将听众从之前的对话中分离出来，但我不知道该怎么做。

这是我在用户单击左侧的 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() 方法都会创建另一个监听器。您应该只在聊天开始时运行该函数一次。

或者，您可以在单击另一个聊天时停用监听器。您可以在 usersRef.child(${uid}/chats/${chatID}/messages) 上调用 .off()，其中和 chatID 和 uid 与您导航离开的聊天相匹配。这将停止收听该聊天的任何更新。