how to speed up this slow-motion jquery script with array and objects?

Question

On my site I have a set of input buttons with sizes.

// input elements
<input type="button" value="S" class="pblI" />
<input type="button" value="M" class="pblI" />
<input type="button" value="L" class="pblI" />

// output element
<input type="text" id="sizeMaster" value="" />

The user can click these buttons to construct an assortment, for example size S/1, M/2, L/3. A click on size S adds S/1 to the assortment. Next click on S make it S/2 and so on.

I'm using it on a mobile site with Jquery Mobile, so I know I'm getting the 300ms delay click.

Still the script is awfully slow to exectute, so I'm wondering if someone can point me to any "performance enhancements" for the following:

// an array and defaults
var remSize = [],
remIndex = -1,
szString, remData, i;

// click listener
$(document).on('click', '.pblI', function () {

    // when clicked, construct a new object ala {size=S;qty=1}
    szString = "";
    remData = {};
       remData.size = $(this).find('input').val();
       remData.qty = 1;

    // loop through the array to see whether the size is already in there
    for (i = 0; i < remSize.length; i++) {
        // return index position of size (otherwise index stays on -1)
        if (remSize[i].size == remData.size) {
            remIndex = i;
            break;
        }
    }

  // if the size is not in the array push the new object into the array
  if (remIndex == -1 || typeof remIndex == "undefined") {        
    remSize.push(remData);
    } else {
       // else increase qty of exisiting size by 1          
       ++remSize[remIndex].qty;
       }

// create input string to display for the user
$(remSize).each(function (i) {
    szString = szString + remSize[i].size + "/" + remSize[i].qty + " ";
    // this will output something like this: 34/1 36/2 38/1
    });
// update input field
$('#sizeMaster').val(szString);
});

Answer 1

I don't know what exactly is slow, but you can do these parts a little bit faster:

    for (i = 0; i < remSize.length; i++) {
        // return index position of size (otherwise index stays on -1)
        if (remSize[i].size == remData.size) {
            remIndex = i;
            break;
        }
    }

to

    for (i=0,j=remSize.length;i<j;++i) {
        // return index position of size (otherwise index stays on -1)
        if(remSize[i].size === remData.size) {
            remIndex = i; i = j;
        }
    }

and

$(remSize).each(function (i) {
    szString = szString + remSize[i].size + "/" + remSize[i].qty + " ";
    // this will output something like this: 34/1 36/2 38/1
    });

to

for(i=0;i<j;++i) {
    szString += remSize[i].size + "/" + remSize[i].qty + " ";
}

and

$('#sizeMaster').val(szString);

to

document.getElementById('sizeMaster').value = szString;

But i don't think this will make a big difference.

Edit: Of course you need to define "j" at the beginning.

Answer 2

You can remove some of the delay by listening for touchend rather than click

Here's an example - http://code.google.com/mobile/articles/fast_buttons.html