title: Multiple AJAX calls without blocking
body: <p>I run a function called <code>checker</code> every 60 seconds like so:</p>
  
  <pre><code>setInterval( checker, 60 * 1000 );
  </code></pre>
  
  <p><code>checker</code> has an array of URLs which it checks via AJAX, the current code is like this:</p>
  
  <pre><code>$.ajax({
    url: sites[i].url,
    type: "GET",
    dataType: "json",
    async: false,
    success: function(data){
       //blah blah blah
    }else{
       //something else
    },
    error: function(){
      //blah blah blah
    }
  });
  </code></pre>
  
  <p>The code works, changes some UI based stuff depending on the results of the JSON. My problem is that the execution time for this checking several sites is ~4 seconds, at which point the page becomes unresponsive for this time. If I remove <code>async: false</code> the code no longer works as expected.</p>
  
  <p>Someone mentioned using callbacks to solve the problem but don't understand how to use them in this context.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Updated code based upon suggestion from adosan:</p>
  
  <pre><code>function promtest(){
      var sites = [
               { name: "WorkingSite", url: "http://sitename.com/testing.php" },
               //a bunch more sites, 1 returns a 404 to test for failure
               { name: "404Site", url: "http://404url.com/testing.php" }
               ];
  
      var promiseList = [];
      for(var i in sites){
      var promise = $.ajax({
      url: sites[i].url,
      type: "GET",
      dataType: "json",
      async: true,
      success: function(data){
  
        if( data.Response != 'OK' ){
          console.log('Site ' + sites[i].name + ' Not OK' );
        }else{
          console.log( 'Site ' + sites[i].name + ' OK ');
        }
      },
  
      failure: function(data){
        console.log('Failure for site: ' + sites[i].name);
      },
  
      error: function(){
        console.log('Site ' + sites[i].name + ' Not OK' );
      }
  
      });
  
      promiseList.push(promise);
      }
  
      $.when.apply($, promiseList).then(function(){console.log('success')}, function(){console.log('fail')});
  
  }
  </code></pre>
  
  <p>In the console I see:</p>
  
  <pre><code>Site 404Site Not OK
  Site 404Site Not OK
  Site 404Site Not OK
  Site 404Site Not OK
  Site 404Site Not OK
  Site 404Site Not OK
  Site 404Site Not OK
  fail
  Site 404Site Not OK
  Site 404Site Not OK
  Site 404Site Not OK
  Site 404Site Not OK
  </code></pre>
  
  <p>Note that the site name is always showing as the last one on the list.</p>