javascript - JQuery 更高效地将新内容加载到 Div

Question

我有一个正在尝试开发的聊天系统，并且正在使用 jQuery。

目前，我有这样的事情来不断更新聊天以确保正在加载新消息：

setInterval(refreshMessages, 1000);

function refreshMessages() {
    console.log("Refreshing messages");
    $("#conversation_container").load(location.href+" #conversation_container>*","");
}

如果我在“提交消息按钮单击”时将此函数调用嵌套在 AJAX 请求中，则这确保了所有浏览器都会发生这种情况，而不仅仅是提交新消息的用户。

显然，这可能是低效的，因为这是每 1 秒执行一次。有没有办法，而不是重新加载整个 div，只需获取<div class="messages">已添加到对话中的新内容并附加这些内容？或者任何其他方法可以提高效率？而不是强迫用户自己重新加载页面或每秒查询页面。

<div id="conversation_container">
    <div class="message">
      First Message!
    </div>
</div>
<form>
  <input id="conversationID" type="hidden"></input>
  <input id="messageInput" name="message" placeholder="Type your message here" type="text"></input>
  <input id="sendMessage" type="submit" value="Send"></input>
</form>

（这里有一些 Ruby 后端来存储消息并将它们保存到将显示在页面上的消息数组中）。

标签： javascripthtmljquery