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

Question

我的要求：

1. 点击提交按钮并点击Ajax调用
2. 显示进度条
3. Ajax 调用完成后隐藏进度条
4. 使用 Ajax 结果显示 Extjs.Message.alert(Ajax 结果)

问题是当我点击提交按钮时，它会在下面执行代码，但不会立即显示进度条，而且进度条与 Extjs 消息警报框同时隐藏

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();
});

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

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);
}