使用jQuery的Chrome上的AJAX请求冻结页面,直到它们全部完成

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*/ }

在请求完成时放置要激活的代码.