mobile.loading 显示时间过长答案

【问题标题】：mobile.loading takes too long to showmobile.loading 显示时间过长
【发布时间】：2016-07-28 18:26:56
【问题描述】：

我们正在构建一个应用程序，该应用程序通过 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);

});

当我们需要在单击按钮后显示加载器时，加载器需要很长时间才能显示，并且它失去了显示它的所有意义，因此用户知道他必须等待。

按钮点击调用一个 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>

带有函数getLoginResult()的JS

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

编辑它在浏览器中有效，但在设备上无效。

【问题讨论】：

标签： javascript ajax jquery-mobile telerik loader

【解决方案1】：

改变这个：

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

到这里：

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

并将您的 javascript 代码绑定到按钮单击事件：

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

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

    //etc

小提琴：https://jsfiddle.net/1vmjc4bm/

编辑：

更好的是，将您的 HTML 代码放在表单中，并将您的 javascript 代码绑定到表单提交事件，如下所示：

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/

【讨论】：