javascript - 使用ajax数据刷新div的更有效方法

Question

我已经构建了一个ajax聊天应用程序，但现在当它刷新聊天(加载所有新聊天)时，它似乎在删除所有当前聊天和加载所有聊天(包括新聊天)之间暂停。这是在计时器上设置的，所以每当它运行时，它都会有这样的空白间隙，然后跳转到页面顶部(div 的顶部被刷新)我需要做什么来确保这不会发生不会发生吗？即:我如何取消等待期/采取不同的做法？

$(document).ready(function() {
window.setInterval(function(){
    $('#chat-messages').empty();
    getMessages(meid, friendid);
}, 5000);
});

$.ajax({
    url: 'getAllMessages.php',
    data: 'id='+id+'&&friend='+friendid,
    type: 'POST',
    success: function(res) {
        // processing code goes in here, it was too long so I took it out.
    }
});

Answer 1

$.ajax({
    url: 'getAllMessages.php',
    data: 'id='+id+'&&friend='+friendid,
    type: 'POST',
    success: function(res) {
        $('#chat-messages').empty(); 
        // empty on success to avoid delay caused due to ajax request
    }
});

<小时/>

• 减少间隔时间
• 添加新内容，而不是删除旧内容并添加新内容。
• 使用 setTimeout 调用并将其添加到成功 block