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

Question

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

但在这种情况下，alert 先弹出，而 spinner gif 仍然显示，并且在单击 后重新加载 页面好的。

我什至尝试在 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);
  }

},

两者给出相同的结果。

Answer 1

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

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

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