title: how to use jquery wait until innerHTML finish loaded before execute other function?
body: <p>I try to get data from database and display them onto a div, after all messages are shown on the div, then only it will know the scrollheight of the div, it will auto scroll to the bottom of div as default by function asd(). My problem is when there are too many messages on database, it took very long time to display them all onto the div, so asd() executed before all messages are displayed. Meaning the scrollheight of the div is incorrect at this point, thus auto scroll to bottom is fail.</p>
  
  <pre><code>$(function() { showMsg(); asd(); }); 
  </code></pre>
  
  <p>How to wait until <code>showMsg()</code> finish render the contents before execute <code>asd()</code>? I have <code>jQuery.get(); .append(); .replace(); .innerHTML</code> inside showMsg().</p>
  
  <p>The problem is fixed when I use timeout to execute asd() after 3 seconds :</p>
  
  <pre><code>$(function() { showMsg(); setTimeout(asd();, 3000); }); 
  </code></pre>
  
  <p>That's why I sure asd() is executed when showMsg() is not yet finish loaded the contents.</p>
  
  <p>I guess I know where is the problem. If showMsg() is executed BEFORE the DOM is ready, and if asd() is executed AFTER DOM is ready (at this point all messages are rendered already), so the problem is fix. But now my situation is AFTER the DOM is ready, all messages still not yet finish rendered, because showMsg() and asd() are executed only AFTER the DOM is ready, "executed" doesn't mean "finish rendered". How to make sure showMsg() finish rendered the contents into a div before execute asd() ? </p>
  
  <p>For those who want to know the codes inside showMsg(), here :</p>
  
  <pre><code>function showMsg(){
      jQuery.get("showRspContentLive.php", function(data) {
         $('#rsp .rspcontent').append(data);
         var container = document.getElementById("rsp2");
         var text = container.innerHTML;          
         text = text.replace(/\(smile1\)/g, '&lt;img src="images/emoticons/emobasic/smile1.gif" border="0" /&gt;')
         .replace(/\(smile2\)/g, '&lt;img src="images/emoticons/emobasic/smile2.gif" border="0" /&gt;')
         .replace(/\(smile3\)/g, '&lt;img src="images/emoticons/emobasic/smile3.gif" border="0" /&gt;')
         .replace(/\(haha2\)/g, '&lt;img src="images/emoticons/emobasic/haha2.gif" border="0" /&gt;')
         .replace(/\(haha3\)/g, '&lt;img src="images/emoticons/emobasic/haha3.gif" border="0" /&gt;')
         .replace(/\(haha5\)/g, '&lt;img src="images/emoticons/emobasic/haha5.gif" border="0" /&gt;')
         .replace(/\(sad1\)/g, '&lt;img src="images/emoticons/emobasic/sad1.gif" border="0" /&gt;');
         container.innerHTML = text;
  
         $('#rsp').scrollTop($('#rsp')[0].scrollHeight); // this is my asd() function, how to execute it only if after container.innerHTML=text; is finish loaded?   
      }); 
  }; 
  </code></pre>