title: Using setTimeout to update progress bar when looping over multiple variables
body: <p>Suppose you have 3 arrays you want to loop over, with lengths x, y, and z, and for each loop, you want to update a progress bar.  For example:</p>
  
  <pre><code>function run() {
      x = 100;
      y = 100;
      z = 10;
      count = 0;
      for (i=0; i&lt;x; i++) {
          //some code
          for (j=0; j&lt;y; j++) {
              // some code
              for (k=0; k&lt;z; k++) {
                  //some code
                  $("#progressbar").reportprogress(100*++count/(x*y*z));
              }
          }
      }
  }
  </code></pre>
  
  <p>However, in this example, the progress bar doesn't update until the function completes.  Therefore, I believe I need to use setTimeout to make the progress bar update while the function runs, although I'm not sure how to do that when you have nested for loops.</p>
  
  <p>Do I need to break each loop up into its own function, or can I leave them as nested for loops?</p>
  
  <p>I created a jsfiddle page in case you'd like to run the current function:  <a href="http://jsfiddle.net/jrenfree/6V4Xp/" rel="nofollow">http://jsfiddle.net/jrenfree/6V4Xp/</a></p>
  
  <p>Thanks!</p>