从phonegap应用程序中删除300毫秒的延迟

Question

我一直在尝试让我的应用程序更具响应性,但遗憾的是似乎没有任何帮助.我正在使用PhoneGap,因此我遇到了触摸事件的着名300ms延迟.

这使得应用程序感觉非常无响应和缓慢,这不是一个选项.

我看到像Fastclick.js这样的库为jQuery移动用户解决了这个问题,但我没有使用jQuery mobile.我正在使用HTML,CSS,JavaScript和jQuery制作我的应用程序.

我真的需要找到一种方法来消除触摸点击的300毫秒延迟.期待我能得到任何帮助.

谢谢.

Answer 1

Christophe Coenraets在他的PhoneGap应用程序十大性能技术中解决了这个问题.这是#6,视频可在Adobe TV上播出(第31分钟).

基本上,300ms延迟不是错误或性能问题,它是检测可能的双击所必需的功能.

摆脱这种延迟的解决方案是使用touch事件的组合而不是click事件,如下所示:

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;
});

但这基本上就是FastClick正在做的事情(事实上,上面的代码片段只是一个从fastclick源代码中删除的非常基本的例子).还有很多其他情况需要处理,所以如果你不想实现自己的库,你应该仔细看看FastClick.它不仅适用于jQuery移动用户,实际上它甚至不需要jQuery,它只是一个独立的小型脚本库.

请注意jQuery移动用户:您可以使用FastClick,但您应该了解内置的类似功能:vclick

tl; dr:如果你没有jQuery Mobile,请使用FastClick

Answer 2

Fastclick对我不起作用.也许它不支持Phonegap或它正在使用的webview.

解决Phonegap/cordova 300ms延迟的唯一方法:

$('yourElement').on( 'touchstart', function ( startEvent ) {});

而不是onclick.任何其他解决方案,包括fastclick在Phonegap中都不起作用.