title: consecutive ajax calls freeze chrome and IE
body: <p>i got a strange one. I have to make several consecutive ajax calls, and when a call is complete i update a progress bar. This works perfectly on FF but on the rest of the browsers what happens is that the screen freezes until all the calls are complete.</p>
  
  <p>I am not executing the calls in a loop, but by using some sort of recursion cause there's a lot of checking that needs to be done and a loop is not convenient. </p>
  
  <p>When i tried the same thing using a loop the outcome was more or less the same. Chrome or IE did not update the screen until all the ajax requests where done.</p>
  
  <p>What i noticed is that it works ok on FF and opera, but chrome (safari too i suppose) and IE9 are behaving strange. Also on Chrome, during these requests, the response body of the previous request is empty and will remain like that until all requests are done.</p>
  
  <p>Any ideas?</p>
  
  <p>Code is extensive, but here goes. There is a wrapper to ajax, $(db).bind is a callback for success. db.records is the Json result. Model is an object holding several controller functions</p>
  
  <pre><code>$(db).bind('tokenComplete',function(){
  var x = db.records;
  if (!x.success) { model.callRollBack(); return false; }
  var next = parseInt(x.get.num)+ 1;
  if (typeof x.post.tokens[next] != 'undefined') {
      model.executeToken(next,x.post);
  }
  else { 
      model.progressCurrent.find('div.report').html('all done!!');
  }
  </code></pre>
  
  <p>});</p>
  
  <pre><code>model = {
  drawProgressBarsTotal : function(el,i,v) {
      var p = Math.floor(100 * i / versions.total);
      el.find('span').html(p);
      el.find('div.report').html('updating to : ' + v.version);
      el.find('.changeLog').html(v.changeLog);
      el.find('.changeLog').parents('div').show();
      el.find('img').css({'background-position': 100 - p + '% 100%'});
  },
  executeToken : function(i,x) {
      if (this.fail == true) { return; }
      this.drawProgressBarsCurrent(this.progressCurrent,i+1,x);
      db.trigger = 'tokenComplete';
      db.data = x;
      db.url = dbDefaults.url + '?num='+i+'&amp;action='+x.tokens[i];//bring the first
      $(db).loadStore(db);
  }
  </code></pre>
  
  <p>}</p>
  
  <p>loadStore :</p>
  
  <pre><code>$.dataStore = function( ds ) {
  
      $.fn.loadStore = function(ds){
          $.ajax({
              type: ds.method,
              url: ds.url,
              data: ds.data,
              dataType: ds.dataType,
              cache:false,
              async:true,
              timeout:ds.timeout?ds.timeout:10000,                
              queue: "autocomplete",
  
              contentType:'application/x-www-form-urlencoded;charset=utf-8',
              accepts: {
                  xml: "application/xml, text/xml",
                  json: "application/json, text/json",
                  _default: "*/*"
              },
              beforeSend:function(){
                  loadStatus = true;
              },
              success: function(data) {
                  loadStatus = false;
  
                  if(data)
                  {ds.records=data;}
                  $(ds).trigger(ds.trigger);
              },              
              error: function()
              {                   
                  loadStatus = false;         
                  $(ds).trigger('loadError');
  
              }
          });//END AJAX
      };//END LOADSTORE
  
      try {
          return ds;
      } finally {
          ds = null;
      }
  
  }
  </code></pre>
  
  <p>}</p>