ajax回调函数javascript中的执行顺序混乱

我有以下ajax操作，该操作旨在(1) show spinner gif在发送ajax请求之前以及在请求完成之后提供(2) hidegif和3 display适当的警报消息。最后(4) reload是页面。

这是代码：

$.ajax({
   url: rUrl,
   data: {
      id: rID,
      requisitionStatus: rStatus,
      comment: rComment
   },
   type: "POST",
   cache: false,
   beforeSend: function() {
      $("#requisitionStatusDialog").dialog('close');
      $('#ajax_loader_my').show();
   },
   success: function(data, resp) {
      var json = data;
      var obj = JSON && JSON.parse(json) || $.parseJSON(json);
      if (obj.status == "success") {
         alert('Success! ' + obj.message);
         location.reload();
      } else if (obj.status == "error") {
         alert('Error!' + obj.message);
      }
   },
   error: function(data, resp) {
      $("#updateDialog").dialog('close');
      console.log(resp);
   },
   complete: function() {
      $('#ajax_loader_my').hide();
   }
});

但是在这种情况下，先alert弹出，然后spinner gif仍然显示，然后reloads单击OK。

我什hiding至在success回调本身中尝试了gif，而不是使用了complete：

success: function(data, resp) {
  var json = data;
  var obj = JSON && JSON.parse(json) || $.parseJSON(json);
  if (obj.status == "success") {
     $('#ajax_loader_my').hide();
     alert('Success! ' + obj.message);
     location.reload();
  } else if (obj.status == "error") {
     alert('Error!' + obj.message);
  }

}，

两者给出相同的结果。