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()方法は別のものを作成し、リスナー。チャットが開始されたときにのみ、その機能を一度実行する必要があります。

また、別のチャットをクリックしたときにリスナーを無効にすることもできます。 .off()はusersRef.child(${uid}/chats/${chatID}/messages)に、とuidは、離れた場所から移動したチャットと一致します。それはそのチャットからの更新情報の受信を停止します。