mobile.loading dauert zu lang

Question

Wir erstellen eine App, die einige externe Anrufe von ajax POST und GET durchführt und während dieser Anrufe versuchen wir, das mobile.loading zu zeigen. Die Lader wir von einer Seite zur anderen nennen, inside "pagebeforecreate" zeigen OK, wie hier gezeigt:

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

});

Immer wenn wir einen Loader nach einem Klick anzeigen müssen, dauert es zu lange, bis der Loader erscheint und es verliert den Eindruck, dass er angezeigt werden muss, damit der Benutzer weiß, dass er warten muss.

Der Klick auf die Schaltfläche ruft eine JS-Funktion auf, die einen POST erstellt und je nach dem Ergebnis des POST auf eine andere Seite umschalten oder einen Alarm anzeigen kann. Wenn der Alarm angezeigt werden muss, wird der Loader nur im selben Moment wie der Alarm angezeigt, wenn er angezeigt wird, sobald der Benutzer auf die Schaltfläche klickt und sich unmittelbar vor dem Alarm versteckt.

HTML mit der Taste

<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 mit der Funktion 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 im Browser funktioniert, aber es funktioniert nicht auf die Gerät.

Answer 1

ändern diese:

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

dazu:

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

und binden Sie Ihre JavaScript-Code auf die Schaltfläche Click-Ereignis:

$(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:

Noch besser, Ihre HTML-Code in eine Form gebracht, und binden Sie Ihre Javascript-Code in das Formular einreichen Ereignis, wie folgt aus:

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

Aktualisiert Geige: https://jsfiddle.net/1vmjc4bm/1/