Question

有很多关于消除移动应用中点击延迟的文章。 Fastclick专注于问题：＆＃34;移动浏览器将等待您点击按钮以触发点击事件的大约300毫秒。＆＃34;

但是我的查询有点不同我在eclipse中开发的android移动应用程序花了很长时间来启用点击事件（即第一次应用程序加载点击事件很长时间没有被触发，并且第一次发生点击事件，后续的点击事件要快得多。我只在模拟器上测试过它还没有在真实设备上测试过。

如何删除延迟？

这是我的html页面：

    <head>

    <title>First App</title>
    <style> 
    .table {
        border: 2px solid #a1a1a1;
        background: #dddddd;
        width: 90px;
        height: 90px;
        border-radius: 25px;
        text-align: center;
        line-height: 90px;
        position:absolute;
    }
    </style>
    <script src="cordova.js"></script>
    <link rel="stylesheet" href="jquery.mobile-1.4.3.min.css">
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script src="jquery.mobile-1.4.3.min.js"></script>

    <script type="text/javascript">
        var areaIdvalue=1;
        var layoutIdvalue=1;

        document.addEventListener("deviceready", onDeviceReady, false);

        function onDeviceReady()
        {
            loadLayot();
            loadAreaButton();
            loadTableData();
        }

        function loadTableData()
        {
            $('.table1').html('');
            var param = "{'areaId':" + areaIdvalue + ",'layoutId':" + layoutIdvalue + "}";
            $.ajax({
                type: "POST",

                url: "http://192.168.0.70:81/MobileService.asmx/GetTables",
                data: param,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: true,
                cache: false,
                success: function (msg) {
                    var Tabels = msg.d;
                    $.each(Tabels, function(index, table) {
                    var tabel_data='<div class="table"';
                    tabel_data +=' style="top:'+ table.PointY +'px;';
                    tabel_data +='left:'+table.PointX+'px;"';

                    tabel_data +=" ' >"+table.TableName +"</div>";
                    $('.table1').append(tabel_data);
                });
                $(".table").on("tap",function(){
                    window.location = "AddItems.html";
                });

                },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert('error');
                    alert(errorThrown);
                }
            });
        }


        function loadLayot(){
            var param = "{'areaId':" + areaIdvalue + "}";
            $.ajax({
                type:'POST',
                url :"http://192.168.0.70:81/MobileService.asmx/FetchLayout",
                dataType:"json",
                data: param,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: true,
                cache: false,
                success : function (msg) {

                    var Tabels = msg.d;
                    $.each(Tabels, function(index, table) {
                    var div_data="<option value="+table.LayoutId+">"+table.LayoutName+"</option>";
                    //alert(div_data);
                    $(div_data).appendTo('#Layout');   
                    $('#Layout').selectmenu('refresh');
                    });

                    $('#pageOne').on("change", '#Layout', function() {
                    layoutIdvalue=$('#Layout').val();
                    loadTableData();
                    });
                },
                error : function (XMLHttpRequest, textStatus, errorThrown) {
                    alert('error');
                    alert(errorThrown);
                }
            });
        }

        function loadAreaButton(){
            $.ajax({
                type:'POST',
                url :"http://192.168.0.70:81/MobileService.asmx/FetchArea",
                dataType:"json",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: true,
                cache: false,
                success : function (msg) {

                    var Tabels = msg.d;
                    $.each(Tabels, function(index, table) {
                    var div_data='<button class="ui-btn ui-btn-inline" value='+table.AreaId+'>'+table.AreaName+'</button>';
                    $(div_data).appendTo('#areadiv');  
                    $(document).on('click', 'button', function() {
                    areaIdvalue=$(this).attr('value');
                    loadTableData();
                    return false;
                    }); 

                });
                },
                error : function (XMLHttpRequest, textStatus, errorThrown) {
                    alert('error');
                    alert(errorThrown);
                }
            });
        }

        function callAnothePage()
         {
            //window.location = "AddItems.html";
            $.mobile.changePage( "#pagetwo", { transition: "slidefade"} );
         }

        </script>
    </head>
    <body>
        <div data-role="page"  id="pageOne">
            <div data-role="header" data-position="fixed">
                <h1>Swift Retail</h1>
            </div>
            <div data-role="main" class="ui-content">
                <div id="areadiv"></div>
                <fieldset class="ui-field-contain">
                    <label for="Layout">Select Layout</label>

                    <select id="Layout" >

                    </select>
                </fieldset>
                <div class="table1" style="position: absolute; display: block; width:100%; height:100%"; ></div>
            </div>

            <div data-role="footer" data-position="fixed">

            </div>
        </div> 
            <div data-role="footer" data-position="fixed">
            </div>
        </div> 
    </body>
</html>

Answer 1

我的猜测是您的应用程序落后。因为javascript是单线程的，所以，如果您有足够多的代码，则有时UI和其他事件将被阻止。不需要花一分钟的时间进行响应，只需花一分钟的时间即可处理代码，然后在最终释放代码时将处理点击。

问：如何确保是这种情况？

A：注释您在onDeviceReady中调用的3个函数，只需创建一个简单的按钮即可触发警报或控制台日志。然后在同一设备/仿真器上运行它。如果正确运行，那么hyg，这是您的问题，您正在运行效率很低的代码。

问：它正在工作，但是如何解决效率问题？

A：您正在尝试在“同一时间”运行大约3个循环吗？您真的需要这样做吗？他们多大？它们可以变小吗？您可以加载总和，也许以后再加载吗？也许要显示加载指示器，直到完成？

问：那还不能解决，现在怎么办？

A：好吧，我想不出其他任何可能引起这种情况的信息，我们将需要更多信息，但是您应该尝试在可能具有其他Android版本的真实设备上运行它。

Phonegap android需要很长时间才能检测到点击事件

1 个答案: