Comment retarder le gestionnaire .keyup() jusqu'à ce que l'utilisateur arrête de taper ?

Question

J'ai un champ de recherche. Actuellement, il recherche chaque combinaison de touches. Donc si quelqu'un tape "Windows", il va faire une recherche avec AJAX pour chaque combinaison de touches : "W", "Wi", "Win", "Wind", "Windo", "Window", "Windows".

Je veux avoir un délai, de sorte que la recherche ne soit effectuée que lorsque l'utilisateur cesse de taper pendant 200 ms.

Il n'y a pas d'option pour cela dans le keyup et j'ai essayé setTimeout mais ça n'a pas marché.

Comment puis-je faire ça ?

Answer 1

J'utilise cette petite fonction dans le même but, en exécutant une fonction après que l'utilisateur a cessé de taper pendant une durée déterminée ou dans des événements qui se déclenchent à un rythme élevé, tels que resize :

function delay(callback, ms) {
  var timer = 0;
  return function() {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      callback.apply(context, args);
    }, ms || 0);
  };
}

// Example usage:

$('#input').keyup(delay(function (e) {
  console.log('Time elapsed!', this.value);
}, 500));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="input">Try it:
<input id="input" type="text" placeholder="Type something here..."/>
</label>

Comment cela fonctionne :

El delay renvoie une fonction enveloppée qui gère en interne une minuterie individuelle. À chaque exécution, la minuterie est redémarrée avec le délai fourni, si plusieurs exécutions ont lieu avant que ce délai ne soit écoulé, la minuterie est simplement réinitialisée et recommence.

Lorsque la minuterie se termine enfin, la fonction de rappel est exécutée, en passant le contexte et les arguments d'origine (dans cet exemple, l'objet événement de jQuery, et l'élément DOM en tant que this ).

MISE À JOUR 2019-05-16

J'ai réimplémenté la fonction en utilisant les fonctionnalités ES5 et ES6 pour les environnements modernes :

function delay(fn, ms) {
  let timer = 0
  return function(...args) {
    clearTimeout(timer)
    timer = setTimeout(fn.bind(this, ...args), ms || 0)
  }
}

La mise en œuvre est couverte par un série de tests .

Pour quelque chose de plus sophistiqué, jetez un coup d'œil à jQuery Typewatch plugin.

Answer 2

Si vous souhaitez effectuer une recherche après que le type est terminé, utilisez une variable globale pour contenir le délai d'attente renvoyé par votre fichier setTimout et l'annuler avec un clearTimeout s'il n'est pas encore arrivé, de sorte qu'il ne déclenche pas le délai d'attente sauf sur le dernier keyup événement

var globalTimeout = null;  
$('#id').keyup(function(){
  if(globalTimeout != null) clearTimeout(globalTimeout);  
  globalTimeout =setTimeout(SearchFunc,200);  
}   
function SearchFunc(){  
  globalTimeout = null;  
  //ajax code
}

Ou avec une fonction anonyme :

var globalTimeout = null;  
$('#id').keyup(function() {
  if (globalTimeout != null) {
    clearTimeout(globalTimeout);
  }
  globalTimeout = setTimeout(function() {
    globalTimeout = null;  

    //ajax code

  }, 200);  
}

Answer 3

Vous pouvez également consulter underscore.js qui fournit des méthodes utilitaires telles que rebondissement :

var lazyLayout = _.debounce(calculateLayout, 300);
$(window).resize(lazyLayout);

Answer 4

Sur la base de la réponse du CMS, j'ai réalisé ce :

Mettez le code ci-dessous après include jQuery :

/*
 * delayKeyup
 * http://code.azerti.net/javascript/jquery/delaykeyup.htm
 * Inspired by CMS in this post : http://stackoverflow.com/questions/1909441/jquery-keyup-delay
 * Written by Gaten
 * Exemple : $("#input").delayKeyup(function(){ alert("5 secondes passed from the last event keyup."); }, 5000);
 */
(function ($) {
    $.fn.delayKeyup = function(callback, ms){
        var timer = 0;
        $(this).keyup(function(){                   
            clearTimeout (timer);
            timer = setTimeout(callback, ms);
        });
        return $(this);
    };
})(jQuery);

Et utilisez simplement comme ceci :

$('#input').delayKeyup(function(){ alert("5 secondes passed from the last event keyup."); }, 5000);

Attention : la variable $(this) dans la fonction passée en paramètre ne correspond pas à l'entrée

Answer 5

Cela a fonctionné pour moi où j'ai retardé l'opération de logique de recherche et fait une vérification si la valeur est la même que celle entrée dans le champ de texte. Si la valeur est la même, je continue et j'effectue l'opération pour les données liées à la valeur de recherche.

$('#searchText').on('keyup',function () {
    var searchValue = $(this).val();
    setTimeout(function(){
        if(searchValue == $('#searchText').val() && searchValue != null && searchValue != "") {
           // logic to fetch data based on searchValue
        }
        else if(searchValue == ''){
           // logic to load all the data
        }
    },300);
});