【发布时间】：2014-08-07 09:17:12
【问题描述】：
有很多关于消除移动应用中的点击延迟的文章。 Fastclick 关注的问题是：“从您点击按钮触发点击事件开始，移动浏览器将等待大约 300 毫秒。”
但是我的查询有点不同，我在 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>
【问题讨论】：
-
奇怪的问题。不过，您可以尝试“点击”事件。
-
我也尝试过点击事件。一样的
-
我也注意到模拟器有类似的问题。点击事件无法正常触发并卡住。需要点击两次触发，然后事件触发两次。有时点击运行没有任何问题。
-
但在我的情况下，第一次点击事件似乎需要大约 1 分钟才能触发，然后后续事件会更快。
-
我知道模拟器很慢，能有这么慢吗？
标签： android jquery jquery-mobile cordova