ajax调用期间进度条没有立即显示

Question

我的要求：

1. 单击提交按钮并点击Ajax通话
2. 显示进度栏
3. Ajax调用完成后，隐藏进度栏
4. 显示具有Ajax结果的Extjs.Message.alert（Ajax结果）

问题是，当我单击提交按钮时，它执行以下代码，但不会立即显示进度条，并且进度条与Extjs Message Alert框同时隐藏]

function submit() {

  jQuery("#myProgressBar").show();
  Ext.Message.Alert(doAjaxCall());
}



function doAjaxCall() {
  var ajaxResult = null;
  jQuery.ajax({
    url: someUrl,
    data: someData,

    success: function(result) {
      task.delay(1000);

      ajaxResult = result;
    }


  });
  return ajaxResult;
}

如果我使用下面的代码，则仅显示进度条，否则不显示进度条

var task= new Ext.util.DelayedTask(function() {
  jQuery("#myProgressBar").hide();
});

和Ajax调用成功部分中的task.delay(1000);

Answer 1

尝试一下

function submit() {
  jQuery("#myProgressBar").show();
  doAjaxCall(aftersuccess);
}

function doAjaxCall(callback) {
  var ajaxResult = null;
  jQuery.ajax({
    url: someUrl,
    data: someData,

    success: function(result) {
     callback(result);
    }


  });
return result;
}

function  aftersuccess(data){
 jQuery("#myProgressBar").hide();
alert(data);
}