Comment ajouter un délai de frappe à un gestionnaire jQuery .keyup() ?

Comment implémenter un délai de saisie dans le gestionnaire .keyup()

Lorsque vous travaillez avec des champs de recherche qui déclenchent des actions à chaque fois qu'une clé est pressé, il peut être avantageux de mettre en œuvre un délai pour réduire les requêtes inutiles. Cet article explique comment obtenir ce délai, en garantissant que les requêtes ne sont exécutées qu'après une pause dans la saisie.

Le gestionnaire .keyup() n'offre pas d'option inhérente pour introduire un délai. Cependant, une fonction personnalisée peut être utilisée pour obtenir ce comportement. Une approche courante consiste à utiliser la fonction setTimeout().

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);
  };
}

Cette fonction prend deux paramètres : le rappel (la fonction à exécuter après le délai) et ms (la durée du délai en millisecondes).

Pour utiliser cette fonction avec le gestionnaire .keyup() :

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

Dans cet exemple, le .keyup() du champ « entrée » L'événement déclenche la fonction de retard, qui attend 500 millisecondes après chaque pression sur une touche. Ce n'est que lorsque l'utilisateur arrête de taper pendant une demi-seconde que le rappel s'exécute, enregistrant la valeur actuelle du champ de saisie.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!