Las solicitudes de AJAX en Chrome usando jQuery congelan la página hasta que completen

Question

El siguiente código funciona bien en Firefox: muestra la barra de progreso que progresa en cada archivo cargado, mientras tanto en Chrome solo muestra la barra de progreso al final de la transacción, también cuando Hago clic en el botón "enviar", se congela hasta que la función finaliza.

var max = files.length + 1; 
var progress_step = 0; 
$.post(form.action, $(form).serialize(), function(response){ 
    var data = jQuery.parseJSON(response); 
    if ("errors" in data){ 
    //...; 
    } 
    else if ("work_id" in data){ 
    var work_id = data.work_id; 
    //initial increase of progress once Work was created 
    progress_step = progress_step + 1; 
    progress(progress_step, max); 

    $.each(files, function(index, obj){ 
     uploadFile(work_id, obj); 
     progress_step = progress_step + 1; 
     progress(progress_step, max); 
    }); 
    } 
}); 

...

function uploadFile (w_id, obj) {  
    var base64_start = obj.src.indexOf(',') + 1; 
    $.ajax({ 
    type: 'POST', 
    url: '/works/upload_image', 
    data: {work_id: w_id, pic: obj.src.substr(base64_start), pic_type: obj.file.type}, 
    processData: true, 
    timeout: 60000, 
    async: false, 
    dataType: 'text' 
    }); 
} 

Answer 1

Si no desea que se congele, cambie async: false a async: true. Como esto hará una solicitud asíncrona, podría romper la funcionalidad de su barra de progreso, porque pasará a la siguiente línea de código antes de que se complete la solicitud. Para solucionar este problema, utilice

success: function() { /*code in here*/ }

poner el código que desea activar cuando la solicitud esté terminado.

Answer 2

Usando async: false se congelará la página hasta que las respuestas del servidor.
No lo use.

Deshágase de esa línea y funcionará bien.
Sin embargo, será asíncrono, por lo que deberá mover su bucle a la devolución de llamada success.

Answer 3

Siguiendo las observaciones de SLaks, obtuve lo siguiente para trabajar con una llamada ajax recursiva. La recursión ocurre en la devolución de llamada exitosa ajax.

var notesText = ""; 
     document.addEventListener('eInspListSynch', function (e) { 

      notesText += "Number of records to save : " + inspRecordList.length.toString() + "\r\n"; 
      $("#SynchNotes").html(notesText); 

      $("#synchProgressBar").progressbar({ 
       value: 0, 
       max: inspRecordList.length 
      }).show(); 

      // Recursive call. 
      SendARecord(0);    

     }); 

     // Recursive call required here because Chrome will set browser updates off when asynch false is set for ajax calls. 
     function SendARecord(currentRecord) 
     { 
      oneInspRecord.recordId = 99; 
      oneInspRecord.weatherId = 5; 
      var cntOfInspSaved = 0; 
      oneInspRecord.contractorName = "CYoung"; 

      var pbVal = $("#synchProgressBar").progressbar("value"); 
      $("#synchProgressBar").progressbar("value", pbVal + 1); 
      $("#synchProgressBar").show(); 

      $.ajax({ 
       type: "Post", 
       url: '@Url.Content("~/SiteVisitInspection/SaveOneSiteVisitInspection/")', 
       dataType: 'text', 
       success: function (res) { 
        // If successful then delete the record from local cache. 
        notesText = inspRecordList[currentRecord].recordId.toString() + " written to server.\r\n" + notesText;      
        currentRecord = currentRecord + 1; 
        $("#SynchNotes").html(notesText); 

        if (currentRecord < inspRecordList.length) { 
         SendARecord(currentRecord); 
        } 
        else { 
         $("#synchProgressBar").hide(); 
         notesText = "Completed synchronization.\r\n" + notesText; 
         $("#SynchNotes").html(notesText); 
         return; 
        } 


       }, 
       error: function (error) { 
        console.log("Error in SaveOneSiteVisitInspection."); 
       }, 
       data: oneInspRecord//, 
       //async: false 

      }) 


     }