Existe-t-il un moyen d’accélérer cette solution pour un jQuery insensible à la casse: contient le sélecteur?

Question

J'ai trouvé cette solution pour un sélecteur jQuery : contient insensible à la casse sur StackOverflow. Cela fonctionne très bien, mais cela se fait au détriment de la performance. Quelqu'un d'autre trouve-t-il cette solution un peu lente?

J'utilise le sélecteur : contient pour rechercher une table. L'utilisateur tape une chaîne de recherche dans une zone de texte. Pour chaque frappe, il recherche dans la table cette chaîne, en affichant uniquement les lignes qui contiennent cette chaîne via le sélecteur : contient . Avant la mise en œuvre de la solution insensible à la casse, cette recherche était rapide et rapide. Maintenant, avec cette solution, il se bloque pendant un bref moment après chaque frappe.

Des idées sur la manière dont cette solution pourrait être accélérée?

Answer 1

J'ai trouvé une autre solution de recherche insensible à la casse sur Google (voir Eric Phan ) qui varie légèrement de celui que j’utilisais à l’origine.

Original:

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

EricPhan:

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

En comparant les deux, vous pouvez constater que la solution d'Eric Phan accède directement aux attributs DOM et utilise toLowerCase () au lieu de toUpperCase () . La dernière n'a pas vraiment d'importance, mais c'est la première qui a réellement amélioré les performances de la recherche insensible à la casse. Il suffit de changer la solution d'origine pour utiliser (a.textContent || a.innerText || "") au lieu de jQuery (a) .text () a créé toutes les différence!

Maintenant, je suis un peu curieux, voici donc une question suivante: Quel est le problème avec jQuery.text () ? Pourquoi est-ce si lent? J'ai mes hypothèses, mais j'aimerais entendre ce que les experts ont à dire.

Enfin, merci à tous ceux qui ont répondu. J'apprécie votre aide. =)

Answer 2

Vous pouvez essayer de vérifier le sélecteur une seule fois après que l'utilisateur a cessé de taper pendant un certain temps, et non pour chaque frappe.

Par exemple, une implémentation simple:

Utilisation:

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

Mise en oeuvre:

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

vous pouvez essayer de ne pas vérifier après chaque frappe, mais peut-être une seconde après avoir appuyé sur la dernière frappe. De cette façon, vous ne vérifiez pas constamment pendant que l'utilisateur tape, mais plutôt quand l'utilisateur a fini ou en pause de taper.

Answer 4

  

voici une question suivante:   le contrat avec jQuery.text ()? Pourquoi c'est   si lent?

Je soupçonne que c'est lent en raison du $ (a) (conversion de l'élément DOM en un objet jQuery) et non du .text () .

Answer 5

Pour ajouter à ce que jason a dit, vous pouvez utiliser ce plugin pour y parvenir.