AJAX-запросы в Chrome с использованием страницы зависания jQuery, пока они не завершатся

Question

Код ниже хорошо работает в Firefox - отображает индикатор выполнения, который прогрессирует для каждого загружаемого файла, в то время как в Chrome он отображает индикатор выполнения только в конце транзакции, также, когда я нажимаю кнопку «отправить», он останавливается до завершения функции.

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

Если вы не хотите, чтобы оно зависало, измените async: false на async: true.Так как это сделает асинхронный запрос, это может нарушить функциональность вашего индикатора выполнения, потому что он перейдет к следующей строке кода, прежде чем запрос будет завершен.Чтобы исправить это, используйте

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

, чтобы ввести код, который вы хотите активировать после завершения запроса.

Answer 2

Использование async: false остановит страницу, пока сервер не ответит.
Не используйте его.

Избавьтесь от этой строки, и она будет работать нормально.
Однако он будет асинхронным, поэтому вам нужно переместить цикл в обратный вызов success.

Answer 3

Следуя замечаниям SLaks, я получил следующее для работы с рекурсивным вызовом ajax.Рекурсия происходит при обратном вызове ajax success.

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

            })


        }