AJAX聊天，刷新和大量消息

Question

Im programming an ajax chat by myself at the moment. The core stuff is finished, but I got 2 problems:

1. Im checking for new messages every 2 seconds, and if there are new messages I add them with .append() to the parent chat window. But the chat flickers every time i append an element and thats neither good looking nor an acceptable issue. And, wich leads me to my second problem, resets the scrolling of the element.

2. Because I want the chat to always be scrolled to the bottom, I use .animate({ scrollTop: $(document).innerHeight() }, 1); at the moment. But at an certain amount of messages, or child elements, the scroll just stays halfway trough...

I looked up both problems but haven't found any help yet. And since I did the whole chat by myself I googled a lot.

Thanks for any suggestions or help, how to improve the chat! :)

EDIT: The append code

        `// For loop for every chat window
        for(i = 0; i < chatListArray.length; i++)
        {
            (function(id) {
                // Ajax call to get the chat history
                $.ajax({
                    type: "POST",
                    url: 'code/submit/submitGetChat.php',
                    data: "id=" + id,
                    success: function(data){              
                        $('#chatItemContent_' + id).empty(); // Clear the window
                        $('#chatItemContent_' + id).append(data); // Append the new chat history
                        $('#chatItemContent_' + id).animate({ scrollTop: $(document).innerHeight() }, 1); // scroll down to bottom, to display the latest messages
                    }
                });
            })(chatListArray[i]); // callback
        }`

Answer 1

When you scrolling you are getting the height of the document, not the element which you want to scroll. Have you tried this?

$('#chatItemContent_' + id).animate({ scrollTop: $('#chatItemContent_' + id).innerHeight() }, 1);

It will set scrollTop according to current chat window height, not the document height.