Esiste un modo per accelerare questa soluzione per un jQuery senza distinzione tra maiuscole e minuscole: contiene selettore?

Question

Ho trovato questa soluzione per un selettore jQuery non sensibile al maiuscolo / minuscolo: contiene su StackOverflow. Funziona benissimo, tuttavia viene a scapito delle prestazioni. Qualcun altro trova questa soluzione un po 'lenta?

Sto usando il selettore : contiene per cercare una tabella. L'utente digita una stringa di ricerca in una casella di testo. Per ogni sequenza di tasti, cerca quella tabella per quella stringa, mostrando solo le righe che contengono quella stringa tramite il selettore : contiene . Prima di implementare la soluzione senza distinzione tra maiuscole e minuscole, questa ricerca è stata rapida e scattante. Ora con questa soluzione, si blocca per un breve momento dopo ogni sequenza di tasti.

Qualche idea su come questa soluzione potrebbe essere velocizzata?

Answer 1

Ho trovato un'altra soluzione della ricerca senza distinzione tra maiuscole e minuscole su Google (vedi Eric Phan ) che varia leggermente da quello che stavo usando in origine.

originale:

return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;

EricPhan:

return (a.textContent || a.innerText || "").toLowerCase().indexOf(m[3].toLowerCase())>=0;

Confrontando i due, puoi vedere che la soluzione di Eric Phan accede direttamente agli attributi DOM e usa toLowerCase () invece di toUpperCase () . Quest'ultimo non ha molta importanza, ma il primo è ciò che ha davvero migliorato le prestazioni della ricerca senza distinzione tra maiuscole e minuscole. Basta cambiare la soluzione originale per usare (a.textContent || a.innerText || " ") invece di jQuery (a) .text () fatto tutto differenza!

Ora sono un po 'curioso, quindi ecco una domanda di follow-up: qual è il problema con jQuery.text () ? Perché è così lento? Ho i miei presupposti, ma mi piacerebbe sapere cosa hanno da dire gli esperti.

Infine, grazie a tutti coloro che hanno risposto. Apprezzo il tuo aiuto. =)

Answer 2

Puoi provare a controllare il selettore solo una volta, dopo che l'utente ha smesso di digitare per un determinato periodo di tempo, non per ogni sequenza di tasti.

Ad esempio, una semplice implementazione:

Utilizzo:

$("#textboxId").keyup(function () {
  typewatch(function () {
    // executed only 500 ms after the user stopped typing.
  }, 500);

Implementazione:

var typewatch = function(){
    var timer = 0;  // store the timer id
    return function(callback, ms){
        clearTimeout (timer);  // if the function is called before the timeout
        timer = setTimeout(callback, ms); // clear the timer and start it over
    }  
}();

Answer 3

potresti provare a non controllare dopo ogni pressione di un tasto, ma forse un secondo dopo aver premuto l'ultimo tasto. in questo modo non stai controllando costantemente mentre l'utente sta digitando, ma piuttosto quando hai finito l'utente o hai messo in pausa la digitazione.

Answer 4

  

ecco una domanda di follow-up: cos'è   l'affare con jQuery.text ()? Perché?   così lento?

Sospetto che sia lento a causa del $ (a) (conversione dell'elemento DOM in un oggetto jQuery) e non del .text () .

Answer 5

Per aggiungere ciò che Jason ha detto, puoi provare a usare questo plugin per farlo.