Javascript AJAX追加，而不是在聊天中使用.HTML

基本上，我现在的聊天是这样的：

• 每隔2秒钟它就会检查我的PHP文件loadchat.PHP
• Loadchat.php将获取比其会话更新的每一行
• 然后，它使用以下命令替换my div:#chatbox中的所有当前数据 .html（）函数

现在是交易。 一次又一次地加载所有行，这似乎是非常耗费资源的。 我知道有一种方法可以优化它，使用.append（）函数

尽管如此，我似乎无法将我的头围绕着它

我需要在加载最后一条消息时制作某种计数器或时间戳，以检查是否有比上次加载后更新的内容（行），如果有，则追加新内容

如果我用.append替换.html函数，我只会像现在一样一遍又一遍地收到相同的消息

我该怎么做呢

提前谢谢

//AJAX Timeout Loop Load Chat Function:
function loadChat() {
  $.ajax({
    method: 'POST',
    url: 'ajax/load_chat.php',
    success: function(data) {
      $('#chatbox').html(data);
      //console.log($('#chatbox')[0].scrollHeight - $('#chatbox').innerHeight());
      //console.log($('#chatbox').scrollTop());
      if(atBottom) {
        $("#chatbox").stop().animate({ scrollTop: $('#chatbox')[0].scrollHeight}, 500);
      }
    },    
  });
}

LOADCHAT将发送回的内容示例：

<script type="text/javascript">var imAdmin = true</script>
<div data-chat-sid="76561198216640736" data-chat-msid="76561198216640736" data-chat-sun="deinhoin" class="chat-box__content--single chat-box--mychat">
  <div class="chat-box__content__single--avatar">
     <div class="admin" style="background-image:url(https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/83/83b9e88c1f88451dcc97d2537416bbd413247ad6_full.jpg);"><span>Mod</span></div>
  </div>
  <div class="chat-box__content__single--title">deinhoin</div>
  <div class="chat-box__content__single--message">adada</div>
</div>

var imAdmin=true
摩登派青年
德因霍恩
阿达达

---

它应该只发送var imAdmin变量一次。（适用于.html（））。

尝试使用“数据”属性。您可以在每个聊天项目上都有类似于“数据时间戳”的内容，并使用它来计算何时放置了什么。

尝试使用

.slice（）

/`section`：聊天信息元素的容器
var html=$（“部分div”）；
//`data`:`html`从服务器返回
var data=“123”；
//如果'data`.length`大于现有的'section``div`.length`，
如果（$（数据）.length>$（html）.length）{
//`.slice（）`大于现有`section div`长度的元素
var newdata=$（数据）.slice（$（html）.length）；
//将新元素附加到`节div`
$（“节”）。追加（新数据）；
}

12

尝试使用“数据”属性。您可以在每个聊天项目上设置类似“数据时间戳”的内容，并使用它计算出何时放置的内容。可以在问题中包含

数据
html
的示例？@AdamJeffers good call，将尝试解决此问题。guest271314-无需举例说明。追加函数将继续追加比会话更新的消息，因此它将继续追加相同的消息。很酷，很好的一个，将在我的答案中包含一些示例代码，说明如何实现。这应该是一个注释。我认为这是一个有效的答案，我已经说过了，但是OP说他会这么做，所以我认为这是正确的。我将包括如何实现的代码示例。对不起，我正要编辑我的评论。它会插入第一条消息，但不会在此之后插入@Dyrhoi“它插入第一条消息，但不在此之后插入”可以包括问题中的
#chatbox
html
示例，创建JSFIDLE进行演示？由于我使用的是PHP代码，所以无法制作JSFIDLE。我可以展示一个gyazo吊挂。如您所见，当我输入消息时，它不会加载，只有在我刷新时才会加载。编辑将php文件添加到OPplnkr可能允许运行
php
。在问题中添加
#chatbox
html
的示例可能有助于确定要使用的正确选择器。解决方案的要点是计算消息元素的存在方式，如果
数据
包含的聊天消息比现有的
html
多，则从
数据
中切片大于现有
html
的元素，并附加到
聊天框
<代码>php
部分不影响
$.ajax（）中的操作
成功
。没有
html
structure很难尝试解决方案我添加了一个Loadchat.php将发送回的示例@宾馆271314