Automatically refresh div content and immediately scroll down?

The thing is, I can do both, but I can't make them work immediately one after another, it does the first in the 1st clock, and the second in the 2nd clock. I've also tried with 1 div inside another but it's the same. Here's the code:

the script:

$(document).ready(function() {          

        $("#chatRoomSub").load("chatUpdate.php");
        refreshId = setInterval(function() {
            $("#chatRoomSub").load('chatUpdate.php');
            var object = document.getElementById('chatRoom');
            object.scrollTop = object.scrollHeight;             
        }, 5000);

        $.ajaxSetup({ cache: false });      

    });

the body:

<div class='chatRoom' id="chatRoom">
 开发者_如何学Go   <div class='chatRoomSub' id="chatRoomSub">
    ainda nada foi escrito...
    </div>
</div>

---

You need to use a callback function on the .load() which does the scrolling.

$("#chatRoomSub").load("chatUpdate.php", function() {
  // scroll down
});

This way, the scrolling will occur immediately after the content is loaded.

---

You need to use call back function of jquery. Call back function is something that executes after event if i take an example .load("You code",function())..after loading your code, it will execute "code", it will execute function...