jQuery mobile中更快的mobile.changePage

Question

我有个问题。我有一个登录页面，这是我的移动应用程序的第一个页面，它包含两个字段:用户名和密码，以及一个提交按钮。在提交时，我执行一个ajax调用来检查有效性，如果成功，它将页面切换到主页。

问题:如果成功，它将显示登录页面，两个字段都为空1-2秒，然后最后切换到主页。极其缓慢或迟钝的。

$(document).bind('pageshow', function () {          
            $('#loginSubmit').on("click", function(){
                    $('#loginSubmit').button('disable'); 
                    var formData = $("#loginForm").serialize();
                    console.log(formData);
                    $.ajax({
                        type: "POST",
                        url: "php/checkLogin.php",
                        cache: false,
                        data: formData,
                        success: function(data){
                            var check = $.parseJSON(data);
                            console.log(check);
                            if (check.approved == 1)
                            {
                                $.mobile.changePage('#home');
                                username = $("#username").val();
                            }
                            else
                            {
                                // wrong username or password
                            }
                        }
                    });
            }); 
        });

我已经添加了一个全局加载微调器(这里没有显示)，但它只显示了半秒，然后就消失了。我不知道怎么处理这件事。

控制台日志：

POST http://localhost/jquery/php/checkLogin.php 200 OK 1.02s
POST http://localhost/jquery/ 200 OK 48ms

第一个调用似乎是有效的检查，我假设第二个调用是加载主页。

Answer 1

$.ajax不是你的问题，jQuery手机有一些性能问题(主要是与android平台结合使用的Phonegap )。

在您的情况下，您可以做的事情很少。

从我所看到的，你正在做提交作为点击事件的一部分。单击事件有300毫秒的延迟。这通常(通常是因为很多人不知道什么时候使用fastclick实现)可以用fastclick：https://github.com/drowne/jquery.mobile.fastclick修复。

最坏的情况是，如果你正在创建一个移动应用绑定touchstart事件而不是点击事件。请阅读本文以了解其中的原因：Touchstart vs Click. What happens under the hood?

最后，ajax旋转器消失了，因为ajax调用进入了成功状态，但页面仍在加载。为了应对这种情况，仍然在这个ajax调用点显示：

beforeSend: function() {
    $.mobile.showPageLoadingMsg(true);
}

但将他隐藏在这个页面事件中：

$('#home').live('pageshow', function (event) {
    $.mobile.hidePageLoadingMsg();
});

这将在页面成功加载时隐藏一个微调器。