mobile.loading занимает слишком много времени, чтобы показать

Question

Мы создаем приложение, которое делает внешние вызовы с помощью ajax POST и GET, и во время этих вызовов мы пытаемся показать mobile.loading. Грузчики мы называем с одной страницы на другую, внутри «pagebeforecreate» показываются в порядке, как показано здесь:

$(document).on('pagebeforecreate', "#menu-principal", function(){  
setTimeout(function(){ 
    $.mobile.loading('show', 
     { 
      text: "Loading...", 
      textVisible: true, 
      theme: "b", 
      textonly: true 
     } 
    ); 
},1);  

});

Когда нам нужно показывать загрузчик после нажатия кнопки, загрузчик занимает слишком много времени, чтобы отобразиться, и он теряет всякий смысл показывать его, чтобы пользователь знал, что он должен ждать.

Кнопка click вызывает функцию JS, которая делает POST, и в зависимости от результата POST она может перейти на другую страницу или отобразить предупреждение. Когда необходимо отобразить предупреждение, загрузчик появляется только в тот же момент, что и предупреждение, когда он должен появиться, как только пользователь нажмет кнопку и спрячется прямо перед предупреждением.

HTML с помощью кнопки

<div class="ui-field-contain"> 
    <span class="label">Matrícula com o dígito ou o CPF/CNPJ:</span> 
    <input type="number" id="login_matricula" data-clear-btn="true"> 
</div> 
<div class="ui-field-contain"> 
    <span class="label">Senha <small><a href="javascript:transitionPage('duvidas_senha.html', 'slideup', false, true)">Dúvidas sobre sua senha?</a></small></span> 
    <input type="tel" id="login_senha" name="login_senha" style=" -webkit-text-security: disc;" data-clear-btn="true"> 
</div> 
<div class="ui-field-contain"> 
    <a href="javascript:getLoginResult();"><button id="btn_envia_login" class="botao">Enviar</button></a> 
</div> 

<div class="banner"> 
    <div class="slider" id="sliderHome" role="toolbar"></div> 
</div> 

JS с функцией getLoginResult()

function getLoginResult(){ 
    setTimeout(function(){ 
     $.mobile.loading('show', 
      { 
       text: "Loading...", 
       textVisible: true, 
       theme: "b", 
       textonly: true 
      } 
     ); 
    },0); 

    var url = "/mobile/service/logon"; 
    var matricula = $('#login_matricula').val(); 
    var senha = $('#login_senha').val(); 

    var data = { 
     'username':matricula, 
     'password':senha 
    }; 

    var retorno = sendPostRequest(url, data); 

    if(retorno['responseJSON']['status'] === true){ 
     var dadosAssociado = getDadosAssociado(); 
     localStorage.setItem("dadosAssociado", JSON.stringify(dadosAssociado)); 

     if(retorno['responseJSON']['aviso'] != null){ 
      // removes loading 
      setTimeout(function(){   $.mobile.loading('hide');  },100); 

      alert("Shows alert"); 
     }else{ 

     } 
    }else{ 
     // removes loading 
     setTimeout(function(){   $.mobile.loading('hide');  },100); 
     alert("Fail to login"); 
    } 
} 

EDIT Он работает в браузере, но он не работает на устройство.

Answer 1

Изменить это:

<a href="javascript:getLoginResult();"><button id="btn_envia_login" class="botao">Enviar</button></a> 

к этому:

<button id="btn_envia_login" class="botao">Enviar</button> 

и связать ваш яваскрипта код для события нажатия кнопки:

$(document).on("click", "#btn_envia_login", function(){ 

    setTimeout(function(){ 
     $.mobile.loading('show', 
      { 
       text: "Loading...", 
       textVisible: true, 
       theme: "b", 
       textonly: true 
      } 
     ); 
    },1); 

    //etc 

Fiddle: https://jsfiddle.net/1vmjc4bm/

---

EDIT:

Еще лучше, если поставить HTML-код внутри формы, и связать свой яваскрипта код в виде представить событие, как это:

HTML:

<form data-ajax="false" id="btn_envia_login"> 
    <!-- form content goes here --> 
</form> 

jQuery:

//Submit form 
$(document).on("submit", "#btn_envia_login", function(e){ 
    //Prevent default action 
    e.preventDefault(); 

    //Display loader 
    setTimeout(function(){ 
     $.mobile.loading('show', 
      { 
       text: "Loading...", 
       textVisible: true, 
       theme: "b", 
       textonly: true 
      } 
     ); 
    },1); 

    //further handling 
    //... 
    //... 
    //... 

    //End with return false; 
    return false; 
}); 

Обновленная скрипка: https://jsfiddle.net/1vmjc4bm/1/