使用 AJAX 工作的 JQuery 加载器 async:false

Question

我是 jquery 星球的新手，我不知道如何解决我的问题。我已经阅读了类似问题的所有答案，但没有一个对我有用。我在 MAC OS X 上工作，因此在 Safari 上使用 JQuery 2.1.1，但最终我的平台将在线共享，并且必须与其他浏览器兼容。

目的：我想显示一个包含我的加载动画的页面。但是我的 JQuery 函数包含一个带有 async:false 模式的 ajax 可执行文件，以便能够返回执行脚本的响应。所以我不能使用beforeSend 和complete 选项。我尝试使用在post 上找到的解决方案。不幸的是我的动画没有显示

HTML：

<form id="myRun" method="post" action="" enctype="multipart/form-data">
    ... SOME ACTIONs ...
    <input class="demo" type="button" id="runner" value="Submit">
</form>
<div class="preloader" id="run_loader"><?php include('map/run_loader.php');?></div>

JS：

// Run platform
$('#runner').click(function() {
  $('#run_loader').show();
  setTimeout(function() {
      var results = function(){
        $.ajax({
          url : "php/runner.php",
          type: "post",
          global: false,
          async:false,
          data : $("#myRun").serializeArray(),
          success: function (response) {
            //alert(response);
            //window.location.href = response; *** DOESN'T WORK HERE ***
            $('#run_loader').hide();
            res = response;
          }
        });
        return res;
      }();
  }, 0);
  window.location.href = String(results);
});

问题：您能帮我运行这个加载页面吗？你对我的代码有什么其他的改进吗？

提前致谢

Answer 1

您的问题完全是使用async: false引起的。原因是这会阻止浏览器 UI 在请求进行时更新，导致用户认为浏览器已崩溃或挂起。因此，这是一种非常糟糕的做法，除非绝对别无选择，否则不应使用。如果您检查控制台，您甚至会看到浏览器警告您不要使用同步调用。

您在评论中断言window.location.href 在success 处理程序中不起作用是错误的，它会正常工作。如果它不适合您，那么服务器端代码会向您的 AJAX 调用返回一个错误，您需要对其进行调查和调试。

要改进您的 JS 逻辑，您应该更有效地使用异步回调模式，方法是执行所有依赖于 AJAX 调用结果的逻辑在success 事件处理程序中。您也不需要超时。试试这个：

$('#runner').click(function() {
  $('#run_loader').show();

  $.ajax({
    url: "php/runner.php",
    type: "post",
    data: $("#myRun").serializeArray(),
    success: function(response) {
      $('#run_loader').hide();
      window.location.assign(response);
    }
  });
});