从phonegap应用程序中删除300毫秒的延迟 [英] Remove the 300ms delay from phonegap apps

问题描述

我一直在努力让我的应用程序更灵敏，但不幸的是没有什么似乎有帮助。
我使用PhoneGap，因此我遇到着名的300毫秒延迟触摸事件。

这使得应用程序感觉非常无反应和缓慢，这只是不是一个选项。

我看到一些类似Fastclick.js的库解决了jQuery移动用户的这个问题，但是我没有使用jQuery mobile。我正在使用HTML，CSS，JavaScript和jQuery做我的应用程序。

我真的需要找到一个方法来摆脱300ms的延迟，我的触摸点击。
期待我能得到任何帮助。

感谢。

解决方案

Christophe Coenraets在他的 PhoneGap应用程序的十大性能技术 。这是＃6，该视频可在 Adob​​e TV （在31分钟）。

基本上，300ms延迟不是一个错误或性能问题，它是检测可能的双击。

解决此延迟的解决方案是使用 触摸事件而不是点击 / p>

  var trackingClick = false; 
 var targetElement = null; 
 var touchStartX = 0; 
 var touchStartY = 0; 
 var touchBoundary = 10; 
 
 target.addEventListener（'touchstart'，function（event）{
 
 trackingClick = true; 
 targetElement = event.target; 
 touchStartX = event .targetTouches [0] .pageX; 
 touchStartY = event.targetTouches [0] .pageY; 
 
 return true; 
}）; 
 
 target.addEventListener（'touchend'，function（event）{
 
 trackingClick = false; 
 
 //处理点击事件
 ... 
 
 return false; 
}）; 
 
 target.addEventListener（'touchmove'，function（event）{
 if（！trackingClick）{
 return true; 
} 
 $ b b //如果触摸已移动，取消点击跟踪
 if（targetElement！== event.target 
 ||（Math.abs（event.changedTouches [0] .pageX  -  touchStartX）> touchBoundary 
 ||（Math.abs（event.changedTouches [0] .pageY  -  touchStartY）> touchBoundary））{
 trackingClick = false; 
 targetElement = null; 
} 
 
 return true; 
}）; 
 
 target.addEventListener（'touchcancel'，function（）{
 trackingClick = false; 
但是这基本上是什么   （实际上，上面的代码片段只是一个非常基本的例子，从fastclick源代码）。还有很多其他情况处理，所以如果你不想实现自己的库，你应该真的仔细看看FastClick。这不仅仅是因为jQuery mobile 用户，事实上，它甚至不需要jQuery，它只是一个自足的小型足迹库。 
 
 
 
 注意jQuery移动用户：您可以使用FastClick，但是您应该知道内置的类似功能： vclick   
 
 
 
  tl; dr：use   FastClick  （如果您没有jQuery Mobile） 
 
I have been trying to make my app more responsive, but unfortunately nothing seems to help.
I am using PhoneGap and hence I am experiencing the famous 300ms delay for touch events.

This makes the app feel very unresponsive and slow which is just not an option.

I saw some libraries like Fastclick.js that solve this issue for jQuery mobile users, but I am not using jQuery mobile. I am making my app just using HTML, CSS, JavaScript and jQuery.

I really need to find a way to get rid of that 300ms delay for my touch clicks.
Looking forward to any help I can get. 

Thanks.
解决方案
Christophe Coenraets has addressed this issue in his Top 10 Performance Techniques for PhoneGap Applications. It's the #6 and the video is available on Adobe TV (at the 31st minute).

Basically, the 300ms delay is not a bug or a performance issue, it's a feature necessary to detect the possible double tap. 

The solution to get rid of that delay is to use a combination of touch events instead of the click event with something like this :
var trackingClick = false;
var targetElement = null;
var touchStartX = 0;
var touchStartY = 0;
var touchBoundary = 10;

target.addEventListener('touchstart', function(event) {

    trackingClick = true;
    targetElement = event.target;
    touchStartX = event.targetTouches[0].pageX;
    touchStartY = event.targetTouches[0].pageY;

    return true;
});

target.addEventListener('touchend', function(event) {

    trackingClick = false;

    //handle click event
    ...

    return false;
});

target.addEventListener('touchmove', function(event) {
    if (!trackingClick) {
        return true;
    }

    // If the touch has moved, cancel the click tracking
    if (targetElement !== event.target 
        || (Math.abs(event.changedTouches[0].pageX - touchStartX) > touchBoundary 
        || (Math.abs(event.changedTouches[0].pageY - touchStartY) > touchBoundary)) {
        trackingClick = false;
        targetElement = null;
    }

    return true;
});

target.addEventListener('touchcancel', function() {
    trackingClick = false;
    targetElement = null;
});
But that's basically what FastClick is doing (in fact, the above snippet is just a very basic example ripped off of fastclick source code). There are lots of other cases to handle so if you don't feel like implementing your own library, you should really take a closer look at FastClick. It's not only for jQuery mobile users, in fact, it doesn't even need jQuery, it's just a self-contained small footprint library. 

Note for jQuery mobile users : you can use FastClick but you should be aware of the built-in similar feature : vclick

tl;dr : use FastClick if you don't have jQuery Mobile

                        
这篇关于从phonegap应用程序中删除300毫秒的延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！