javascript with firebase Push方法在聊天页面中显示两次或多次值.每当我回到页面并来聊天页面

Question

我正在使用firebase创建一个简单的聊天页面每当我从当前页面(聊天页面)返回页面并回到聊天页面并发送消息"嗨"时它会在聊天页面中显示两次,如果我返回到另一个页面页面再次回到聊天页面并发送消息,它显示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");