последовательные вызовы ajax freeze chrome и IE

Question

У меня странный. Я должен сделать несколько последовательных вызовов ajax, и когда звонок завершен, я обновляю индикатор выполнения. Это отлично работает на FF, но на остальных браузерах происходит то, что экран зависает, пока все вызовы не будут завершены.

Я не выполняю вызовы в цикле, но, используя какую-то рекурсию, есть много проверок, которые необходимо выполнить, и цикл не удобен.

Когда я пробовал то же самое, используя цикл, результат был более или менее одинаковым. Chrome или IE не обновляли экран до тех пор, пока все запросы ajax не будут выполнены.

Что я заметил, так это то, что он работает нормально на FF и опера, но хром (сафари тоже я полагаю) и IE9 ведут себя странно. Также в Chrome во время этих запросов тело ответа предыдущего запроса пуст и останется таким, пока все запросы не будут выполнены.

Любые идеи?

Код экстенсивный, но здесь идет. Существует оболочка для ajax, $ (db) .bind - это обратный вызов для успеха. db.records - результат Json. Модель представляет собой объект, содержащий несколько функций контроллера

$(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!!'); 
} 

});

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+'&action='+x.tokens[i];//bring the first 
    $(db).loadStore(db); 
} 

}

loadStore:

$.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; 
    } 

} 

}

Answer 1

не следовал весь код, но это звучит как ваша проблема может быть связана с непрерывным исполнением кода. Как правило, пользовательский интерфейс не будет обновляться во время непрерывного выполнения кода. Чтобы исправить это, любой вызов setTimeout() или любых вызовов ajax должен позволять браузеру обновлять пользовательский интерфейс. В принципе, вы должны временно остановить код, а затем запустить его снова.

function updateUI() { 
    // change ui state 
    document.setTimeout(updateUI, 1); 
} 

Если я не в базе, дайте мне знать.