带有 firebase Push 方法的 javascript 在聊天页面中显示值两次或多次。每当我返回页面并来到聊天页面时

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");