Как ускорить этот сценарий замедленного JQuery с массивом и объектами?

Question

На моем сайте у меня есть набор кнопок ввода с размерами.

// 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="" />

Пользователь может нажимать эти кнопки для создания ассортимента, например, размера S / 1, M / 2, L / 3. Клик по размеру S добавляет S / 1 к ассортименту. Затем нажмите S, сделайте S / 2 и так далее.

Я использую его на мобильном сайте с Jquery Mobile, поэтому я знаю, что получаю клик с задержкой 300 мс.

Тем не менее сценарий ужасно медленный, поэтому мне интересно, может ли кто-нибудь указать мне на какие-либо «улучшения производительности» для следующего:

// 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

Вы можете удалить часть задержки, прослушивая touchend вместо нажатия

Вот пример - http://code.google.com/mobile/articles/fast_buttons.html

Answer 2

Я не знаю, что именно медленно, но вы можете сделать эти части немного быстрее:

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

до

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

и

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

до

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

и

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

до

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

Но я не думаю, что это будет иметь большое значение.

Редактировать: Конечно, вам нужно определить «j» в начале.