title: How do I update UI while calling a long running process in AJAX/Javascript?
body: <p>I have mutiple processes that need to be called in series (I am using synchronous AJAX calls).  I would like to display status of a long running process after its completion and then proceed to the next one.  Here is a sample code I have written.</p>
  
  <pre><code>    var counter = 0;
  function runProcess(input, output) {
      doWork();
      doWork();
      doWork();
  };
  function doWork() {
      counter++;
      document.getElementById('&lt;%=this.progressMonitor.ClientID%&gt;').innerHTML += "Running " + counter;
  
      // some lengthy calculations
      for (var i = 0; i &lt; 1000000; i++) {
          var foo = Math.random();
      }
      setTimeout(updateStatus, 1000);
  };
  function updateStatus() {
      document.getElementById('&lt;%=this.progressMonitor.ClientID%&gt;').innerHTML += "Done " + counter;
  }
  </code></pre>
  
  <p>
  
  When I run this, I get the following response:</p>
  
  <p>Running 1Running 2Running 3Done 3Done 3Done 3</p>
  
  <p>I would like to get</p>
  
  <p>Running 1Done 1Running 2Done 2Running 3Done 3</p>
  
  <p>If I insert a alert() statement in updateStatus function, then I get the response/execution order I want.  Is the browser creating 3 threads for 3 function calls and executing them asynchronously?</p>
  
  <p>How can I run this in series? Is setTimeout implemented correctly?  Thanks for your help in advance.</p>