title: jQuery/Javascript - How to wait for manipulated DOM to update before proceeding with function
body: <p>What I'm trying to do is to update a simple div to say "Processing..." before executing a CPU-intensive script (it takes 3-12 seconds to run, no AJAX) then update the div to say "Finished!" when done. </p>
  
  <p>What I'm seeing is the div never gets updated with "Processing...". If I set a breakpoint immediately after that command, then the div text does get updated, so I know the syntax is correct. Same behavior in IE9, FF6, Chrome13.</p>
  
  <p>Even when bypassing jQuery and using basic raw Javascript, I see the same issue.</p>
  
  <p>You'd think this would have an easy answer. However, since the jQuery .html() and .text() don't have a callback hook, that's not an option. It's also not animated, so there is no .queue to manipulate.</p>
  
  <p>You can test this yourselves using the sample code I prepared below that shows both the jQuery and Javascript implementations with a 5 second high-CPU function. The code is easy to follow. When you click either the button or the link, you never see "Processing..."</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" &gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  function addSecs(d, s) {return new Date(d.valueOf()+s*1000);}
  function doRun() {
      document.getElementById('msg').innerHTML = 'Processing JS...';
      start = new Date();
      end = addSecs(start,5);
      do {start = new Date();} while (end-start &gt; 0);
      document.getElementById('msg').innerHTML = 'Finished JS';   
  }
  $(function() {
      $('button').click(function(){
          $('div').text('Processing JQ...');  
          start = new Date();
          end = addSecs(start,5);
          do {start = new Date();} while (end-start &gt; 0);
          $('div').text('Finished JQ');   
      });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="msg"&gt;Not Started&lt;/div&gt;
      &lt;button&gt;jQuery&lt;/button&gt;
      &lt;a href="#" onclick="doRun()"&gt;javascript&lt;/a&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>