如何在 iOS WebApp 上编写即时响应代码？答案

【问题标题】：How to write an instant response code on iOS WebApp?如何在 iOS WebApp 上编写即时响应代码？
【发布时间】：2013-01-25 09:31:15
【问题描述】：

我正在 iOS 上编写一些 WebApp，用于为我的工作收集一些数据。但我发现它有一些问题。

我想写的程序很简单，一碰就让图片消失。所以我想出了这个非常简单的代码。

<!DOCTYPE HTML>
<html lang="en-US" manifest="manifest.mf">
<head>
    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />  
    <meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=0;">
    <link rel="apple-touch-icon-precomposed" href="icon.png"/> 
    <style type="text/css">

    *{
        -webkit-touch-callout: none;
    }

</style>
<script src="http://code.jquery.com/jquery.min.js"></script>

<script>
function show_coords(event)
{
var x=event.offsetX;
var y=event.offsetY;
//alert("X coords: " + x + ", Y coords: " + y);
$("#result p").text("coX= "+x+" coY= " +y);
}

 $(document).ready(function() {
        $('img').each(function() {
            $(this).click(function() {
                $(this).stop().animate({ opacity: 1.0 }, 1);
            },
           function() {
               $(this).stop().animate({ opacity: 0.0 }, 0);
           });
        });
    });
</script>
    <title>DataCollect</title>
</head>
<body>
<img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><br>
<img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><br>
<img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><br>
<img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><br>
<img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><img src="flower.gif"width='50' height='50' onmousedown="show_coords(event)" /><br>

<div id='result'>
    <p></p>
</div>
</body>
</html>

这段代码在电脑浏览器上运行良好。它如我所愿地响应。但是当我在 iphone 的 Safari 上运行它时。好像有点延迟。图片不会突然消失。似乎滞后了大约一秒钟。

你们可以在这里http://jjwestwind.tk/napp/试试你的 ios Safari

那么，我该怎么办？有没有其他方法可以在 WebApp 上编写这种应用程序？或者我别无选择，只能回到原生应用程序？（这会给我提供给其他用户带来很多麻烦）

请帮助我！非常感谢:)

【问题讨论】：

这个延迟是因为与桌面浏览器不同，移动浏览器处理双击。所以浏览器会等待以确保这不是双击。 FastClick 或类似的 JS 库会解决这个问题。通常这个延迟大约是 0.3 秒。
这个点击延迟以及如何解决它对我来说是非常新的！非常感谢你的建议:)

标签： java ios web-applications touch delay

【解决方案1】：

按照这个答案的建议，这可能有助于消除点击延迟：remove click delay

或者使用这个FastClick code javascript 代码。

【讨论】：

非常感谢您的评论。我会尝试修复它并让你知道。非常感谢！
谢谢。如果这回答了您的问题/使您走上了正确的道路，您能否将答案标记为已接受？祝你好运！
好的。非常感谢您的回答。我建议所有遇到此问题的人使用 FastClick 代码。这是工作！