title: async ajax call - show loading gif
body: <p>I'm using ajax to call a POST method in my controller. On average, this method runs between 15 and 20 seconds.</p>
  
  <p>I'm using aync false in that call because I need to wait the answer to know which way to go. But, when i using async false my loading (gif) isn't showed.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>$(document).ajaxStart(function() {
      $('#overlay').show();    
  });
  
  $(document).ajaxStop(function() {
      $('#overlay').hide();
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>What is the best way to resolve it?</p>
  
  <p><strong>EDIT 1</strong></p>
  
  <p>I have the save function that performs multiple validations and calls the method in the controller:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>function salvarInformacoes(pedidos, ums, callback) {
      $.ajax({
          url: 'PlanoCortes/SalvarInformacoes',
          type: 'POST',
          data: {
              sglDeposito: $("#ddl-Deposito option:selected").text(),
              codUnimetPCP: $('#ddl-Um-sip').val(),
              numEtapa: $("#ddl-Operacao").val(),
              rotinaUM: $('#chk-Rotina-UM').is(":checked"),
              dscEtapa: $("#ddl-Operacao option:selected").text(),
              dadosPedidosJson: pedidos,
              dadosUMsJson: ums,
              corteVirtual: corteVirtual
          },
          success: callback
      });
  }
  
  function salvar() {
    var resultado = false;
    ...
    salvarInformacoes(JSON.stringify(pedidos), JSON.stringify(ums), myCallback);
    
    function myCallback(retorno) {
        if (retorno.success != false) {
            ...
        }
        else {
            resultado = false;
            return;
        }
  
        resultado = true;
    }
    
    return resultado;
  }
    ...</code></pre>
  </div>
  </div>
  </p>
  
  <p>Before the method "myCallback" is called, the function return false. In this way, the code inside the statement below is never executed:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>if (salvar()) {
    ...
  }</code></pre>
  </div>
  </div>
  </p>