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

Question

我是jquery星球的新手,我不知道如何解决我的问题.我已经阅读了类似问题的所有答案,但它们都不适合我.我使用的是MAC OS X,因此使用JQuery 2.1.1进行Safari,但最终我的平台将在线共享,并且必须与其他浏览器兼容.

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

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