jQuery running extremely slow on iPad

Question

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

What exactly is slow about it? the loading of the page? interacting with the page? both? You could optimize a little using event delegation, but that would only improve the initial impact, it won't improve interactions with the page. — Kevin B, Jun 03 '13 at 18:12
The `slowness` is felt when tapping/clicking on a box, when it runs the `$('.qtyBox').click` function, as well as when tapping/clicking on a button to enter a quantity, when it runs the `$('.btn').click` function. — The1nk, Jun 03 '13 at 18:13
@KevinB - It actually loads just fine. It might be loading slow, but not slow enough that I notice it. When you tap/click, the scripts that run there are very slow to respond. Thanks! — The1nk, Jun 03 '13 at 18:13
Seems normal to me, is the problem just the 300mS click delay on ipad? http://stackoverflow.com/questions/12238587/eliminate-300ms-delay-on-click-events-in-mobile-safari — rlb, Jun 04 '13 at 09:19
@rlb - please add an answer to the question so I can give you the credit you deserve. ;) *edit -- As in a SO answer. You solved my problem with your bit o' research — The1nk, Jun 04 '13 at 13:20
@The1nk accept the justin3o9 answer, basically same thing and a well written answer for a new SO user. — rlb, Jun 04 '13 at 19:22

score 5 · Accepted Answer · answered Jun 04 '13 at 16:36

5

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

answered Jun 04 '13 at 16:36

Castyr

380
3
14

1

Just for anyone else searching -- I was using the typical jQuery `click` event, and it was having that slow delay. When I switched out to jQuery Mobile and changed the events to `tap`s, it worked a treat with no delay. Thanks! – The1nk Jun 05 '13 at 00:58
I was having this issue within a backbone app, resolved by including this library (so it works on iPad and non-touch devices): https://github.com/nervetattoo/backbone.touch – GotDibbs Dec 11 '13 at 20:52

jQuery running extremely slow on iPad

1 Answers1