JQuery loader with AJAX works async: false

Question

I am new to jQuery planet and I have no idea how to solve my problem. I read all the answers to similar questions, but none of them work for me. I am working on MAC OS X and therefore Safari with jQuery 2.1.1, but in the end my platform will be available on the Internet and should be compatible with other browsers.

PURPOSE: I would like to display a page containing my loading animation. however, my jQuery function contains an ajax executable with a mode async:falsein order to be able to return a executed script response. Therefore, I cannot use the beforeSendand options complete. I tried using the solution I found in this post. Sorry, my animation is not showing

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. , , , . , , , . , , .

, window.location.href success, , . , AJAX, .

JS-, async , , 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);
    }
  });
});