CODEWITHSUNDEEP
jqueryperformanceipad
The1nk
The1nk

Reputation: 702

jQuery running extremely slow on iPad

I've got some jQuery I'm running on a test case we're looking into, and it runs extremely slowly on our iPad 2's.

It's snappy and responsive on our desktops and laptops, though. I've tried removing all the selectors (where possible) and instead using stored references, which didn't help much.

Before that change it was http://jsfiddle.net/EEGgv/5/ while after it was http://jsfiddle.net/EEGgv/6/

Here is the current jQuery code:

$().ready(function () {
    var $varSelected = 'undefined';
    var $this = 'undefined';
    var varPrev = '';
    var varNew = '';

    $('.btn').click(function () {
        $this = $(this);

        if ($varSelected !== 'undefined') {
            // Get previous value
            varPrev = $varSelected.text();

            // Find value we're trying to add
            varAdding = $this.attr('value');

            if (varAdding == 'Clr') {
                varNew = '';
            } else {
                varNew = varPrev + varAdding;
            }

            // Write new value
            $varSelected.text(varNew);
        }
    });

    $('.qtyBox').click(function () {
        $this = $(this);

        // Check if we've previously had a selected box
        if ($varSelected === 'undefined') {
            // Didn't have one before -- nothing special
        } else {
            // Had one selected. We need to unselect it.
            $varSelected.removeClass('Selected');
        }

        // Select the one we have now
        $varSelected = $this;

        // Add formatting
        $this.addClass('Selected');

        // Clear value
        varNew = '';
        $this.text(varNew);
    });
});

I have the /5/ version (pre-references) uploaded to http://test.projectdavis.com/test.html while the /6/ versoin (references) uploaded to http://test.projectdavis.com/test2.html.

Anyone have any insight?

Thanks

Upvotes: 4

Views: 3904

Answers (1)

Castyr
Castyr

Reputation: 380

I was able to test your page on my iPad 2. The input lag seems to be the mobile click event delay where click events are fired after 0.3 seconds on mobile browsers(https://developers.google.com/mobile/articles/fast_buttons?hl=de-DE.). This delay is so that the browser can listen for a double tap. There are four additional event handlers that mobile browser provide, the one you are probably interested in is clickend. The clickend event is fired when the user lifts their finger from the screen.

The code below is from MDN https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Touch_events

var el = document.getElementsById("MyButtonID");
el.addEventListener("touchend", handleEnd, false);

Upvotes: 5

Related Questions