JQuery donuyor sayfasını kullanarak Chrome'da AJAX istekleri tamamlanıncaya kadar

Question

kodu aşağıdaki gibi çalışır. Firefox'ta aşağıdaki kod iyi çalışır. Yüklenen her dosyada ilerleyen ilerleme çubuğu görüntülenir, bu arada Chrome'da yalnızca işlemin sonunda ilerleme çubuğu görüntülenir. "Tamamla" düğmesine tıklarsam, işlev tamamlanana kadar donar. Sunucu cevaplar kadar sayfadan donacak async: false kullanma

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

Dondurulmasını istemiyorsanız, async: false numaralı telefonu async: true olarak değiştirin. Bu, eşzamansız bir istek oluşturacağından, ilerleme çubuğunuzun işlevselliğini bozabilir, çünkü istek tamamlanmadan önce bir sonraki kod satırına geçecektir. Bunu düzeltmek için, istek bittiğinde etkinleştirmek istediğiniz kodu koymak için

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

kullanın.

Answer 2

.
Kullanmayın.

Bu çizgiden kurtulun ve iyi çalışır.
Ancak, bu eşzamansız olacak, dolayısıyla döngüsünüzü success geri aralığına taşımanız gerekecek.

Answer 3

Aşağıdaki sloganlar, özyinelemeli bir ajax çağrısı ile çalışmak için aşağıdakileri aldım. Özyineleme ajax başarı geri dönüşünde gerçekleşiyor.

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 

      }) 


     }