帶有firebase的javascript在聊天頁面中推送方法顯示值兩次或多次。每當我回頁面並進入聊天頁面

Question

我正在使用firebase創建一個簡單的聊天頁面每當我從當前頁面（聊天頁面）返回頁面並返回到聊天頁面併發送消息「Hi」時，它正在顯示兩次在聊天頁面中，如果我返回到另一頁面並再次返回到聊天頁面併發送消息，則顯示3次相同，反之則顯示多次。

波紋管是我的編碼。請有人指導我..

$(document).on('pagebeforeshow', '#chatpage', function() { 

    var ref = new Firebase("https://firechatweb-60edc.firebaseio.com/6pzzmujf"); 
    $("#images6").empty(); 
    ActivityIndicator.show(); 
    ref.orderByChild("messages").on("child_added", function(snapshot) { 

     $("#images6").append(movielist(snapshot.val())); 

     var last_li = $("ul li:last-child").offset().top; 

     //alert(last_li); 
     setTimeout(function() { 
      $.mobile.silentScroll(last_li); 
     }, 50); 

     //console.log(JSON.stringify(snapshot.key()) + " was " +JSON.stringify(snapshot.val())); 
     ActivityIndicator.hide(); 




    }); 


}); 




function movielist(item) { 
    //return "<li style='height:43px; border-bottom: 1px solid grey; font-size:15px; margin-top:18px;' ><a href='#' style='text-decoration:none;' data-name="+item.text+"><span class='left'>"+item.text+"</span><div class='clear'></div></a></li>"; 
    return "<li style='font-size:15px; margin-top:18px;' margin-left:10px;><a href='#' style='text-decoration:none;' data-name=" + item.text + "><span class='left'>" + item.text + "</span><div class='clear'></div></a></li>"; 
} 


$("#button").click(function() { 


    //alert("Hi"); 
    var u = $.trim($("#uname").val()); 
    var p = $("#pwd").val(); 
    localStorage.setItem("locuname", u); 
    localStorage.setItem("locpwd", p); 

    var v = localStorage.getItem("locuname"); 
    var m = localStorage.getItem("locpwd"); 



    if (typeof(Storage) !== "undefined") { 
     $.mobile.changePage("#chatpage", { 
      transition: "slideup", 
      changeHash: false 
     }); 
    } else { 
     // Sorry! No Web Storage support.. 
     console.log("Please Login"); 
    } 

}); 




$("#send").click(function() { 
    var mes = $("#message").val(); 
    if (mes.length == 0) { 
     //alert("Please Enter Text"); 
     navigator.notification.alert(
      'Please Enter Text', // message 
      alertDismissed, // callback 
      'Text Message', // title 
      'Done' // buttonName 
     ); 


    } else { 
     var v = localStorage.getItem("locuname"); 
     var ref = new Firebase("https://firechatweb-60edc.firebaseio.com/6pzzmujf"); 

     ref.push({ 
      name: v, 
      text: mes, 
      photoUrl: "/images/profile_placeholder.png" 
     }); 



     $('#message').val(''); 

     var last_li = $("ul li:last-child").offset().top; 
     setTimeout(function() { 
      $.mobile.silentScroll(last_li); 
     }, 50); 

    } 

}); 

function alertDismissed() { 
    // do something 
} 

Answer 1

你的頁面顯示每次連接新的監聽器：

$(document).on('pagebeforeshow', '#chatpage', function() { 
    var ref = new Firebase("https://firechatweb-60edc.firebaseio.com/6pzzmujf"); 
    $("#images6").empty(); 
    ActivityIndicator.show(); 
    ref.orderByChild("messages").on("child_added", function(snapshot) { 

在這種情況下，你也應該脫離聽者的頁面被隱時現：

$(document).on('pagebeforehide', '#chatpage', function() { 
    var ref = new Firebase("https://firechatweb-60edc.firebaseio.com/6pzzmujf"); 
    $("#images6").empty(); 
    ActivityIndicator.show(); 
    ref.orderByChild("messages").off("child_added");