title: How do I tell javascript to immediately update the DOM?
body: <p>I am trying to load a 'loading' message to the user before a time-intensive function is called in javascript.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;p id='foo'&gt;Foo&lt;/p&gt;​
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>var foo = document.getElementById('foo');
  
  function tellViewerLoading() {
    // Tell the user that loading is occuring.
    foo.innerHTML = 'loading...';   
  }
  
  function someActionThatTakesALongTime() {
    // Do some action that takes a long time.
    var i = 0;
    while(i &lt; 100000) {i++; console.log(i);};
  }
  
  function domUpdateDelayExperiment() {
    tellViewerLoading();
    someActionThatTakesALongTime();
  }
  
  domUpdateDelayExperiment();
  </code></pre>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/johnhoffman/xDRVF/" rel="noreferrer">http://jsfiddle.net/johnhoffman/xDRVF/</a></p>
  
  <p>What I want to happen is for the DOM to be updated immediately after <code>tellViewerLoading()</code> is called.</p>
  
  <p>Instead, what happens is that the DOM seems to be updated after <code>someActionThatTakesALongTime()</code> finishes running. At that point, it is useless to display a loading message.</p>
  
  <p>How do I tell javascript to immediately update the DOM after <code>tellViewerLoading()</code> is called?</p>