Evénement idiomatique jQuery retardé (seulement après une courte pause lors de la frappe)? (Aka TimeWatch/typewatch/keywatch)

Question

Voici jQuery pour une zone de recherche que je pense est en fait un antimodèle, et je suis sûr qu'il ya une bien meilleure solution pour que j'aimerais être pointé vers:

I le décrira dans les commentaires alors donnez simplement le code, puisque les commentaires peuvent être plus clairs et simples que le code:

• // configurer un appel de fonction à la touche.
• // l'appel de fonction a un délai avant que l'événement principal ne se produise.
• // Lorsque vous appuyez sur la touche, effacez tous les événements précédemment mis en file d'attente et créez-en un nouveau au taux de retard standard.
• // Utilisez un global pour stocker le pointeur setTimeout.
• // clearTimeout les pointeurs préexistants.
• // Démarrer 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_trigger)){ 
         clearTimeout(document.global_filter_trigger); 
         // clearTimeout any pre-existing pointers. 
        } 
        // Use a global to store the setTimeout pointer. 
        document.global_filter_trigger = 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 boîte d'entrée où un terme de recherche peut se composer de 10 caractères en moyenne, soit 10 appels à setTimeout dans une demi-seconde, ce qui semble être lourd pour le processeur, et lors de mes tests, cela pose des problèmes de performance, alors j'espère qu'il y a une alternative plus propre? .12 (

.load() est plus simple que de prendre JSON, puis de générer du code HTML à partir de 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 d'autres éléments essentiels, alors peut-être que l'utilisation de keypress() sur cette boîte de saisie n'est pas l'idéal?

Answer 1

J'utilise souvent l'approche suivante, une fonction simple pour exécuter un rappel, après que l'utilisateur a arrêté la saisie d'une quantité de temps ::

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

Mise en œuvre:

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

I pense que cette approche est très simple et n'implique aucune variable globale.

Pour des utilisations plus sophistiquées, jetez un oeil à la jQuery TypeWatch Plugin.

Answer 2

Jetez un oeil à l'excellent plugin Text Change Event de Zurb, fournisseurs de produits jQuery de la plus haute qualité.

Answer 3

Ceci est une autre bonne façon de le faire, sans utiliser le plug-in:

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

timeout = setTimeout(myFunction, 5000) 
})