title: Why Does The Browser Hang When Updating The Progress Bar?
body: <p><strong>Problem: I have some code that runs and it needs to periodically update a progress bar. It seems to work fine until I get to part of my code where the update occurs inside a for loop.</strong> </p>
  
  <p>After the hangup, the progress bar will update to whatever it was supposed to be after the for loop. For instance in this code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Test&lt;/title&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function(){
      $('#Button1').click(function(){
          $("#Progressbar").val(0); //reset to 0
          for(var i = 0; i &lt; 100000; i++){
              $("#Progressbar").val(i/1000);
              //if(i === 50000){
              //  alert("Half Way There");
              //}
          }
      });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;button id="Button1"&gt;Simulate Progress&lt;/button&gt;
      &lt;progress id="Progressbar" value="0" max="100"&gt;&lt;/progress&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My browser (Firefox) will hang-up once the button is pressed and after a couple of seconds display a 100% complete progress bar. If you uncomment the code, you will see that the progress bar is 50% complete when the alert shows up. </p>
  
  <p>Why does it hang like that and not produce a smooth progress update? I tried playing around with Web Workers, but I saw pretty much the same response. </p>