CODEWITHSUNDEEP
javascriptperformanceextjssencha-touch-2profiling
javaCity
javaCity

Reputation: 4318

Sencha Touch button click slower than list item click?

I am in the process of profiling Sencha Touch applications and came across the fact that a click of a button triggers action faster as opposed to a click of a list item from Ext.List for the same action. My timeline profiling data indicates that the action is performed on Timer Fired condition for list item. This timer's timeout is 300ms. Now, for buttons there's no timer, so the action is performed as soon as there's touch end (and other Sencha processing common to all clicks).

In my case, the action is a simple transition to another view without any animation.

Following are the screenshot of my timeline data running application on an iPhone 4.

Transition by button click/tap: Transition by button click/tap

Transition by list item click/tap: Transition by list item click/tap

I tried to dig into the source code, but could not understand why this is actually happening. My hypothesis is that list waits for that 300ms to see if it was actually a tap action or a scroll action. But is this true? If not, can anyone point me towards the right direction to verify if this hypothesis is true or not?

Any help would be highly appreciated!

Upvotes: 0

Views: 1479

Answers (3)

Marco C.
Marco C.

Reputation: 1412

You can disable or edit recognizers configuration in Ext.application: http://www.sencha.com/forum/showthread.php?205692-Reduce-delay-of-itemsingletap-on-xtype-list

Upvotes: 0

javaCity
javaCity

Reputation: 4318

Got it!

This 300ms wasn't because of the scroll event, rather it was to recognize if its a single or a double tap event. If you look at DoubleTap recognizer source code, it has a maxDuration of 300 ms in the config object. This is used to set the time out for firing singleclick event.

onEnd function:

else {
            this.singleTapTimer = setTimeout(function() {
                me.fireSingleTap(e, touch);
            }, maxDuration);
        }

And on every touchStart event, this timeout is cleared. 

onTouchStart: function(e) {
        if (this.callParent(arguments) === false) {
            return false;
        }

        this.startTime = e.time;

        clearTimeout(this.singleTapTimer);
    },

To note, this is a private class, so we cannot rely on it. But if anyone wants to decrease the duration between a tap event and firing off its logic, reduce this time. I have noticed that setting it to 150ms will make list item click much much faster, but at the same time, it also opens up the room for ghost click in other screens, since the events are queued up.

Upvotes: 0

Nico Grunfeld
Nico Grunfeld

Reputation: 1133

I think is because of the pressedDelay config, which for Ext.Button default is 0 and for Ext.DataView is 100 ms.

Aditionally, the button fires directly the handler function. And the dataView executes store.getAt(index) to find the record object and pass it to the itemTap callback what adds some ms.

Upvotes: 1

Related Questions