title: How can I call ajax synchronously without my web page freezing
body: <p>I have some javascript that fires off about 100 calls to a php script. the php script uses up a lot of memory and takes a few seconds to complete, then returns a json response of pass or fail. </p>
  
  <p>I don't want the ajax calls to be asynchronous as the server would come to a grinding halt running 100 instances of itself, so I tried using synchronous, the only problem being it freezes the webpage while it calls the script one call at a time.</p>
  
  <p>How can I fire off the ajax calls one at a time and not freeze the page i'm on?</p>
  
  <pre><code>var a = [];
      a[0] = 'test';
      a[1] = 'hello';
      a[2] = 'another';
  
  $(document).ready(function(){ 
    $.each(a, function(k,v) {
  $.ajax({
    url:'/this-script-takes-a-few-seconds-to-complete.php',
    async:false,
    data: {foo: v},
    success: function(data){      
      console.log(data);  
    }
  });
    });
  });
  </code></pre>