在ajax回调函数javascript中执行乱序

我有一个以下的ajax操作,旨在(1)在发送ajax请求之前显示spinner gif,并在请求完成之后,(2)隐藏gif并显示3条相应的警报消息.
最后(4)重新加载页面.

这是代码：

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

但在这种情况下,当spinner gif仍然显示时,警报会首先弹出,然后在单击OK后重新加载页面.

我甚至试图隐藏gif成功回调本身而不是使用完整：

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

},

两者都给出了相同的结果.

解决方法:

以这种方式重写代码,这会将您的警报和位置相关代码放在事件队列中,该队列将在空闲时运行.

if(obj.status=="success") { 
      $('#ajax_loader_my').hide(); 
      setTimeout(function(){
          alert('Success! '+obj.message);
          location.reload();
      },0);
}

标签：jquery,javascript,ajax,asynccallback
来源： https://codeday.me/bug/20190627/1302802.html