Javascript 追加最后一条消息一次

大家好，我正在尝试用Jquery、php、ajax和mysql构建一个聊天室 几天以来我一直面临的问题是，当我得到最后一条消息的值时，它会不断地追加到div中，我想要的是只追加最后一条消息一次，如果这里有新消息，就再次追加，这就是我的ajax调用

var chat = "";
     $.ajax({
            url: "php/gt_user.php",
            type: "get",
            success: function (result) {
                var gtUser = $.parseJSON(result);
                $.each(gtUser, function (idx, obj) {
                    var usrApp = "<span><i class='fa fa-user-circle-o' aria-hidden='true'></i>";
                    usrApp += "<p class='usr-name'>" + obj.Tables_in_chat + "</p></span>";
                    $('.userarea').append(usrApp);
                }); // here i get all the username who sent a message and print them on a div
                $('.userarea span').on('click', function () {
                    $('.msgarea').html("");
                    var usrName = $(this).text();
                    $('#usrname').text(usrName);
                    setInterval(function () {
                        $.ajax({
                            url: "php/admin_msg.php",
                            type: "post",
                            data: {
                                name: usrName
                            },
                            success: function (result) {
                                var lastmsg = result;

                                function appedn() {
                                    var usrMsg = "<div class='usr-msg'><i class='fa fa-user-circle-o' aria-hidden='true'></i>";
                                    usrMsg += "<span><p>" + lastmsg + "</p></span></div>";
                                    $('.msgarea').append(usrMsg);
                                }

                                if (chat !== result) {
                                    appedn();

                                } else {
                                    chat = result;
                                }

                            }

                        });
                    }, 2000);


                });
            }
        });

var chat=”“；
$.ajax({
url:“php/gt_user.php”，
键入：“获取”，
成功：功能（结果）{
var gtUser=$.parseJSON（结果）；
$。每个（gtUser，函数（idx，obj）{
var usrApp=“”；
usrApp+=“
”+obj.Tables_in_chat+”
”；
$（'.userarea'）.append（usrApp）；
})；//这里我得到了所有发送消息的用户名，并将其打印在div上
$（'.userarea span'）。在（'click'，函数（）{
$（'.msgarea'）.html（“”）；
var usrName=$（this.text（）；
$（'#usrname'）.text（usrname）；
setInterval（函数（）{
$.ajax({
url:“php/admin_msg.php”，
类型：“post”，
数据：{
姓名：usrName
},
成功：功能（结果）{
var lastmsg=结果；
函数appedn（）{
var usrMsg=“”；
usrMsg+=“”+lastmsg+“
”；
$（'.msgarea'）.append（usrMsg）；
}
如果（聊天！==结果）{
appedn（）；
}否则{
聊天=结果；
}
}
});
}, 2000);
});
}
});

---

php/admin_msg.php

的响应正在工作，我成功地收到了最后一条消息问题是该脚本不断向消息区域添加相同的消息，我想要的是只添加一次消息，如果有一条新消息

您需要以某种方式识别已附加到html中的最后一条消息，最好是从服务器发送一些id。因此，您的消息div应该包含一些

数据id

属性，然后当您请求下一条消息时，获取

$（'.msgarea'）

元素的最后一个子元素，读取它的

数据id

，并与当前元素进行比较

---

另一件事我建议移动到一些视图库或框架，react、angular、vue或其他什么。当你想用纯jQuery管理这些功能时，它会变得很复杂。

经过一天的努力，我终于能够解决这个问题，所以我将在这里发布answear，以防它会帮助其他面临同样问题的人

在我必须从数据库中获取所有username表的部分，我将其移动到我的HTML中，并使用几行php来响应这样的结果（每个用户名都有自己的表）

//显示发送消息的所有用户名
$result=$con->query（“从聊天室显示表格”）；
while（$row=mysqli\u fetch\u assoc（$result））{
echo“
”$row['Tables\u in\u chat']。“
”；
} 

然后在jquery脚本上，我将每隔2秒检查最后一条消息的函数移到click事件之外，这样我的jquery脚本现在看起来更干净了

  /* get the user name and added it to the header of the message box  */
     $('.userarea span').on('click', function () {
            $('.msgarea').html("");
            var usrName = $(this).text();
            $('#usrname').text(usrName);

        });
        var chatdata = "";
   /* check for new message and append the message area if there is a new one */
        setInterval(function () {
            var usrName = $('#usrname').text();
            $.ajax({
                url: "php/admin_msg.php",
                type: "post",
                data: {
                    name: usrName
                },
                success: function (result) {
                    function appedn() {
                        var usrMsg = "<div class='usr-msg'><i class='fa fa-user-circle-o' aria-hidden='true'></i>";
                        usrMsg += "<span><p>" + result + "</p></span></div>";
                        $('.msgarea').append(usrMsg);
                    }

                    if (chatdata !== result) {
                        appedn();
                        chatdata = result;
                    }
                }
            });
        }, 2000);

/*获取用户名并将其添加到消息框的标题中*/
$（'.userarea span'）。在（'click'，函数（）{
$（'.msgarea'）.html（“”）；
var usrName=$（this.text（）；
$（'#usrname'）.text（usrname）；
});
var chatdata=“”；
/*检查是否有新消息，如果有新消息，请附加消息区域*/
setInterval（函数（）{
var usrName=$（'#usrName'）.text（）；
$.ajax({
url:“php/admin_msg.php”，
类型：“post”，
数据：{
姓名：usrName
},
成功：功能（结果）{
函数appedn（）{
var usrMsg=“”；
usrMsg+=“”+结果+“
”；
$（'.msgarea'）.append（usrMsg）；
}
if（chatdata！==结果）{
appedn（）；
chatdata=结果；
}
}
});
}, 2000);

您可以发布php/admin\u msg.php的回复吗？我会在响应中包含at timestamp/message id，并且只获取新消息，在第一个请求中发送0，在下面的请求中发送最新检索到的消息id。是的，我已经到了我认为我应该放弃该项目的地步，因为脚本上的这种行为，我教过我缺少一些东西这就是为什么我把问题贴在这里

  /* get the user name and added it to the header of the message box  */
     $('.userarea span').on('click', function () {
            $('.msgarea').html("");
            var usrName = $(this).text();
            $('#usrname').text(usrName);

        });
        var chatdata = "";
   /* check for new message and append the message area if there is a new one */
        setInterval(function () {
            var usrName = $('#usrname').text();
            $.ajax({
                url: "php/admin_msg.php",
                type: "post",
                data: {
                    name: usrName
                },
                success: function (result) {
                    function appedn() {
                        var usrMsg = "<div class='usr-msg'><i class='fa fa-user-circle-o' aria-hidden='true'></i>";
                        usrMsg += "<span><p>" + result + "</p></span></div>";
                        $('.msgarea').append(usrMsg);
                    }

                    if (chatdata !== result) {
                        appedn();
                        chatdata = result;
                    }
                }
            });
        }, 2000);