Javascript: setTimeout () – aide nécessaire

Dans l'échantillon que vous avez fourni, setTimeout ne fait que retarder l'exécution de la fonction, mais le nombre d'exécutions est toujours le même. Ce que vous devez faire est, actualiser le délai chaque fois que l'utilisateur tape un caractère, de sorte que la fonction entrée () ne déclenche pas à chaque fois:

 var timer; $('#searchbox').keyup(function() { clearTimeout(timer); timer = setTimeout(input, 2000); }); 

Ne passez pas setTimeout une chaîne, il n'est pas nécessaire dans ce cas, vous pouvez appeler la fonction directement comme ceci:

 $(function() { $('#searchbox').keyup(function() { if($(this).data("timeout")) clearTimeout($(this).data("timeout")); $(this).data("timeout", setTimeout(input, 2000)); }); }); 

En ce qui concerne l'autre problème de mise en file d'attente, il vous suffit d'effacer le délai d'attente précédent (il y a environ 2 secondes) d'abord comme ci-dessus. En outre, vous pouvez stocker ce délai localement sur l'élément en utilisant .data() comme ci-dessus, moins de variables globales et vous pouvez l'utiliser dans de nombreux éléments au lieu d'une variable temporelle pour chacun.

Vous pouvez utiliser le plugin JQuery pour accélérateur – c'est un limiteur de débit.

JQuery n'est pas nécessaire pour ce plugin, car rien interne utilise des méthodes ou des propriétés jQuery. JQuery est simplement utilisé comme un espace de noms sous lequel ces méthodes peuvent exister.

D' ici

JQuery throttle / debounce vous permet de limiter vos fonctions de manière multiple et utile. Passer un délai et un rappel à $ .throttle renvoie une nouvelle fonction qui n'exécute pas plus d'une fois chaque délai de millisecondes. Passer un délai et un rappel à $ .debounce renvoie une nouvelle fonction qui s'exécute une seule fois, coalescissant plusieurs appels séquentiels en une seule exécution au tout début ou à la fin.

Le délai d'attente ne contribue pas maintenant, car vous ne tardez pas à retarder l'exécution de tous les événements de la souris de 2000 millisecondes – il gèlera simplement le navigateur 2 secondes plus tard. Je suppose que ce que vous voulez, c'est qu'il y a eu 2000 millisecondes depuis le dernier événement de la clé, puis déclenchez la fonction d' input . Cela peut être accompli comme ceci:

 $(document).ready(function() { var keyUpTimeout; $('#searchbox').keyup(function() { clearTimeout(keyUpTimeout); keyUpTimeout = setTimeout("input()", 2000); }); }); 

Lorsque vous effacez le délai d'attente précédent en utilisant clearTimeout , la fonction d' input est appelée une seule fois lorsque l'écriture s'arrête. Ergo, le texte est mis en surbrillance lorsque l'utilisateur a interrompu l'écriture pendant 2 secondes.

Envisagez d'utiliser l'attention et les auditeurs flous avec la fonction setInterval, plutôt que l'écouteur de touches. Dans l'exemple suivant, je n'appelle la méthode de saisie que s'il y a une modification de la valeur "searchbox". Cela me permettra d'éviter les invocations inutiles à la méthode d'entrée [comme l'utilisateur appuyant sur la touche Maj].

 $(document).ready(function() { var highlightInterval; var previousValue = $('#searchbox').val(); $('#searchbox').focus(function() { if(highlightInterval) { window.clearInterval(highlightInterval); } highlightInterval = window.setInterval(function(){ if(previousValue != $('#searchbox').val()){ previousValue = $('#searchbox').val(); input(); } }, 2000); }); $('#searchbox').blur(function(){ window.clearInterval(highlightInterval); }); }); 

Je comprends que la méthode de mise en évidence recherche toutes les apparences de $('#searchbox').val() et ensuite il la ressemble avec une sorte de style de soulignement. Corrigez-moi si j'ai tort, s'il-vous plait!

Je pense que vous pouvez le rendre plus doux en enveloppant chaque mise en surbrillance dans un setTimeout, comme celui-ci

 function wrapIntoHighligh(something){ ... } for(var i = 0; i < occurrences.length; i++){ setTimeout("wrapIntoHighligh(something)", 1); } 

Ce n'est peut-être pas la solution la plus propre … mais cela fera que chaque mise en surbrillance sort de la boucle, elle reprendra dans la pile JS et, espérons-le, ne bloquera pas tout.