300ms delay removal: using fastclick.js vs using ontouchstart

Question

I\'m using regular jQuery and I have an event handler that looks like this:

$(\'#someID\').on({

   click: SomeFunction

}, \'.SomeClass\');

<

Answer 1

To get rid of 300ms delay, here are two options:

Option 1:

By default, there will be about 300ms delay for the click event on webview, which results in a very slow response/performance when click on a button. You can try to override the click event with the ‘tap’ event in jQuery Mobile to remove the delay: (Source: IBM)

$('btnId').on('tap', function(e) {
     e.stopImmediatePropagation();
     e.preventDefault();
     ...
});

Option 2: Interesting one

By default JQuery Mobile CSS itself has introduced a long delay - I mean some places 300ms or 350ms or 225ms. These delays can be optimized. I too have modified the default CSS and reduced the long delay from 350ms to 100ms for page transition and it was really great.

Search in the Jquery Mobile CSS : animation-duration

JQuery Mobile 1.2.0

In some places delay is set to: -webkit-animation-duration:350ms;-moz-animation-duration:350ms while other places delay is: -webkit-animation-duration:225ms;-moz-animation-duration:225ms

The latest version on github:

.in {
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 350ms;
    -moz-animation-timing-function: ease-out;
    -moz-animation-duration: 350ms;
    animation-timing-function: ease-out;
    animation-duration: 350ms;
}
.out {
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 225ms;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: 225ms;
    animation-timing-function: ease-in;
    animation-duration: 225ms;
}

Check this github code:

Now it's up to you which delay you want to optimize, like click, page transition, flip, slide etc. and accordingly just modify the default delay time with your own desired delay time.

In this way there is NO need of an extra library