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

【问题标题】：execution out of order inside ajax callback function javascript在ajax回调函数javascript中执行乱序
【发布时间】：2019-08-05 06:54:28
【问题描述】：

我有一个以下 ajax 操作，旨在在发送 ajax 请求之前发送 (1) show spinner gif，在请求完成之后，(2) hide gif 和 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 后的页面。

我什至尝试了hidingsuccess 回调本身中的 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);
  }

两者都给出相同的结果。

【问题讨论】：

写 $('#ajax_loader_my').hide();在成功函数的开始，然后尝试
@RK_15 一样..
发生这种情况是因为 $(...).hide() 是异步的。
使用 $('#ajax_loader_my')[0].style.display = "none" 然后尝试
@Azima，请尝试我更新的答案。尝试使用一些内联 html 来显示成功或错误，或者可以登录到控制台，而不是警报。

标签： javascript jquery ajax asynccallback

【解决方案1】：

您的警报在微调器隐藏之前弹出的原因是成功代码在完成之前运行，它隐藏了微调器。它重新加载的原因是因为在您发送 location.reload(); 的警报之后；

检查 $('#ajax_loader_my').hide();实际上是隐藏微调器。在您的 html 中是或包含微调器的元素必须将其 id 设置为 ajax_loader_my。

如果您打开 Chrome 或 Firefox 开发工具，您应该能够发送 $('#ajax_loader_my').hide() 并查看会发生什么。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您好，您应该尝试使用 Promise，这里是文档 Jquery promises，我是在运行中创建的，它可能会出现一些错误，但这只是一个示例：

$( function() {
  function AjaxCall(rID,rStatus,rComment){
    return $.ajax({
      url: 'request.php',
      data: {
        id: rID,
        requisitionStatus: rStatus,
        comment: rComment    
      },
      type: "POST",
      cache: false,
      beforeSend: function() {
        $("#requisitionStatusDialog").dialog('close');
        $('#ajax_loader_my').show();
      }
    })
  }


  $( "#requisitionStatusDialog" ).dialog();

  $("#yourbuttonInputId").on('click',function(event) {
    AjaxCall().done(function(data,response){
      var obj = JSON.parse(data);
      if (obj.status == "success") {
        alert('whe are on done!');
      }
    }).fail(function(data,response){
      $("#updateDialog").dialog(' close');
    }).always(function(data){
      if(confirm('You have finished the request.  Click OK if you wish to continue ,click Cancel to reload the page.'))
      {
        $('#ajax_loader_my').hide();
        $("#requisitionStatusDialog").dialog('open');
      }else{
        location.reload();
      }

    });
  });
} );

编辑：检查此jsfiddle，它将指导您详细说明您的代码

希望对你有帮助

【讨论】：

【解决方案4】：

我宁愿建议使用空的 div 或带有 Id 的 span。比在该 div 的 html 中显示成功。例如：

$('#ajax_loader_my').hide();    
setTimeout(function () { 
    $('#successDiv').html('Success! ' + obj.message);
    location.reload();
}, 2000);

【讨论】：