javascript - setInterval() 妨碍 UI 的用户友好性，有什么解决办法吗？

Question

我正在使用 jQuery / PHP / JavaScript 创建聊天（请不要建议 node.js / redis / socket.io，我只是想要解决所提出的问题）。

我在下面的代码中遇到的问题是，因为它每秒刷新一次（所以它是一个实时聊天），它显示了 100 条消息，但是当向下滚动时，它会因为它已经刷新而迅速恢复。

这个问题有什么好的解决方案吗？

代码：

var all_chats = setInterval(function() {
  $.ajax({
    url: './requests/chat.php',
    type: 'POST',
    success: function(chats) {
      $('.chat').html(chats);
    }
  });
}, 1000);

Answer 1

var all_chats = setInterval(function () {
    $.ajax({
        url: './requests/chat.php',
        type: 'POST',
        success: function (chats) {
            $('.chat').append(chats);
        }
    });
}, 1000);