title: jQuery how to make the ajax request "synchronous" when async is true
body: <pre><code>var tds = [&quot;0&quot;, &quot;1&quot;, &quot;2&quot;, &quot;3&quot;, &quot;4&quot;, &quot;5&quot;, &quot;6&quot;];
  
  for (var i = 0; i &lt; tds.length; i++) {
  
      jQuery(&quot;#notification-bar&quot;).html('I am doing ' + tds[i]);
  
      jQuery.ajax({
          url: &quot;/ajax_json_echo/&quot;,
          type: &quot;POST&quot;,
          timeout: 10000,
          data: tds[i],
          success: function(response) {
         
          },
          error: function(x, t, m) {
          
   
          }
      });
  
  
  } //end for
  
  jQuery(&quot;#notification-bar&quot;).html(&quot;Done!&quot;);​
  </code></pre>
  <p>/ajax_json_echo/ might take 10 seconds or even more to deal with tds.</p>
  <p>The expected result of notification bar is</p>
  <blockquote>
  <p>I am doing 0</p>
  <p>I am doing 1</p>
  <p>I am doing 2</p>
  <p>...</p>
  <p>Done!</p>
  </blockquote>
  <p>The actual result I get is:</p>
  <blockquote>
  <p>Done!</p>
  </blockquote>
  <p>I guess it is caused by the async variable of jquery ajax is being set to true.</p>
  <p>If it is set to false, the browser will be frozen. When it recovers, I get &quot;Done!&quot; only.</p>