title: Why is my javascript/jquery not executing sequentially?
body: <p>I have a button tied to a click handler -- which makes one or more AJAX calls, depending on how many items are in an array.  I use the <a href="http://jquery.malsup.com/block/" rel="nofollow">blockUI jquery plugin</a> to show a message while the ajax call(s) are being made, then I show the results, and remove the blockUI message by calling $.unblockUI();.  </p>
  
  <p><strong>Problem:</strong>  For some reason, no matter how many times I want the ajaxCall function to execute, after the FIRST ajax call completes, the messaging is removed even though the loop still continues to execute, and the results display correctly in the #results div.  I want the full number of loop iterations to complete before removing the messaging, but it seems like its not executing sequentially.  Here is the code in question:</p>
  
  <pre><code>$("#myButton").live("click", function(){
      $.blockUI({ message: '&lt;img src="new_loader.gif" /&gt;&lt;h2&gt;Getting Config Files&lt;/h2&gt;&lt;small&gt;Please be patient.&lt;/small&gt;',
              css: { 
              border: 'none', 
              padding: '15px', 
              backgroundColor: '#FFF', 
              '-webkit-border-radius': '10px', 
              '-moz-border-radius': '10px',  
              color: '#000' 
              } 
          }); 
  
      for (var i=0; i&lt; myArray.length; i++)
          {
           ajaxCall(myArray[i]);
          }
      $("#results").show('slow');
      $.unblockUI();  
      return false;
  });
  </code></pre>
  
  <p>Is there an explanation for why the code AFTER the loop is executing even though the loop isn't complete yet?  Any help it appreciated!  Thanks.</p>