Question

我正在建立一个聊天网站。我使用AJAX每2秒获取一次聊天消息。我还使用了scrollTop：在加载数据时自动滚动页面。但是我似乎无法弄清楚如何仅在每隔2秒收到一条新消息时才自动滚动。

$('.contact').click(function() {
$('.cont').not(this).removeClass('active');
$(this).toggleClass('active');
sendRequest();
function sendRequest(){
var convo_id=document.getElementById("convo_id").value;
 $.ajax({
  cache: false,
  type: "POST",
  url: 'show_chat.php',
  data: ({convo_id: convo_id}),
  success: function(response) {
  $('#chatgoeshere').html(response);
  $(".messages").animate({ scrollTop: $(document).height() }, "fast");},
    complete: function() {
   // Schedule the next request when the current one's complete
   setTimeout(sendRequest, 2000); // The interval set to 5 seconds
   }
   });
   };
   });

谢谢

Answer 1

将服务器响应从简单的HTML转换为对象，并包括此聊天中的消息总数：

{ html: "yourHtml", messagesCount: yourMessagesCount }

然后在javascript中将旧计数与收到的计数进行比较，如果为true，则更新内容

if(oldMessages < response.messagesCount)

也仅在有新消息时才更新内容，否则，如果没有新内容，您将重新渲染页面并浪费资源：）

Answer 2

在此行

success: function(response) {

您需要检查响应。如果您得到一些数据，则可以向上滚动页面。

Answer 3

仅检查响应是否为空，然后添加滚动功能

if response
{
  $('#chatgoeshere').html(response);
  $(".messages").animate({ scrollTop: $(document).height() }, "fast");},

}

如何知道AJAX是否已获取新数据？

3 个答案: