Wie beschleunigt man dieses Slow-Motion-jquery-Skript mit Array und Objekten?

Question

Auf meiner Website habe ich eine Reihe von Eingabetasten mit Größen.

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

Der Benutzer kann auf diese Schaltflächen klicken, um ein Sortiment zu erstellen, zum Beispiel Größe S/1, M/2, L/3. Ein Klick auf Größe S fügt S/1 zum Sortiment hinzu. Als nächstes klicke auf S mach es S/2 und so weiter.

Ich benutze es auf einer mobilen Website mit Jquery Mobile, so dass ich weiß, dass ich die 300ms Verzögerung klicke.

Immer noch das Skript exectute schrecklich langsam ist, so frage ich mich, wenn jemand mich auf irgendwelche „Performance-Verbesserungen“ für die folgenden verweisen kann:

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

Ich weiß nicht, was genau langsam ist, Sie können jedoch diese Teile ein wenig tun, schneller:

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

zu

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

und

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

zu

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

und

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

zu

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

Aber ich glaube nicht, das wird einen großen Unterschied machen.

Edit: Natürlich müssen Sie am Anfang "j" definieren.

Hier ist ein Beispiel

Answer 2

Sie können für touchend einige der Verzögerung entfernen, anstatt klicken Sie durch Zuhören - http://code.google.com/mobile/articles/fast_buttons.html