Evénement retardé jQuery idiomatique (uniquement après une courte pause de frappe)? (aka timewatch / typewatch / keywatch)

Voici quelques éléments de requête jQuery pour un champ de recherche qui, à mon avis, est un anti-modèle, et je suis sûr qu’il existe une bien meilleure solution pour laquelle j’aimerais être orientée:

Je vais le décrire dans les commentaires, puis simplement donner le code, car les commentaires peuvent être plus clairs et simples que le code:

  • // configure un appel de fonction sur une pression de touche.
  • // L’appel à une fonction a un délai avant l’événement principal.
  • // Lorsque la fonction de frappe est appelée, effacez tous les événements précédemment mis en queue et créez-en un nouveau au taux de retard standard.
  • // Utilisez un global pour stocker le pointeur setTimeout.
  • // clearTimeout les pointeurs préexistants.
  • // Commence un nouveau délai.

Le code:

// set up a filter function call on keypress. $('#supplier-select-filter').keypress(function (){ // Currently, resets a delay on an eventual filtering action every keypress. filterSuppliers(.3, this); }); // Delayed filter that kills all previous filter request. function filterSuppliers(delay, inputbox){ if(undefined != typeof(document.global_filter_sortinggger)){ clearTimeout(document.global_filter_sortinggger); // clearTimeout any pre-existing pointers. } // Use a global to store the setTimeout pointer. document.global_filter_sortinggger = setTimeout(function (){ var mask = $(inputbox).val(); $('#user_id').load("supplier.php?action=ajax_getsuppliers_html&mask="+escape(mask)); }, 1000*delay); // Finally, after delay is reached, display the filter results. } 

Les problèmes:

Sur une zone de saisie où un terme de recherche peut comporter 10 caractères en moyenne, il faut 10 appels à setTimeout en une demi-seconde, ce qui semble être un processeur lourd, et dans mes tests, certains problèmes de performances se posent, alors j’espère qu’il y a un nettoyeur alternative?

.load () est plus simple que de prendre JSON puis de générer du HTML à partir du JSON, mais peut-être qu’il existe un meilleur outil?

.keypress () ne semble pas toujours déclencher sur des choses comme la suppression de retour arrière et autres éléments essentiels, alors peut-être qu’utiliser keypress () sur cette zone de saisie n’est pas l’idéal?

    J’utilise fréquemment l’approche suivante, une fonction simple pour exécuter un rappel, une fois que l’utilisateur a cessé de taper pendant un laps de temps spécifié:

     $(selector).keyup(function () { typewatch(function () { // executed only 500 ms after the last keyup event. }, 500); }); 

    La mise en oeuvre:

     var typewatch = (function(){ var timer = 0; return function(callback, ms){ clearTimeout (timer); timer = setTimeout(callback, ms); }; })(); 

    Je pense que cette approche est très simple et qu’elle n’implique aucune variable globale.

    Pour des utilisations plus sophistiquées, jetez un oeil au plugin jQuery TypeWatch .

    Jetez un coup d’œil à l’excellent plug-in Text Change Event de Zurb, fournisseur des produits jQuery de la plus haute qualité.

    C’est un moyen plus efficace de le faire, sans utiliser le plugin:

     var timeout; $('input[type=text]').keypress(function() { if(timeout) { clearTimeout(timeout); timeout = null; } timeout = setTimeout(myFunction, 5000) })