Remove the 300ms delay from phonegap apps

Question

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

Answer 1

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