Comment puis-je retarder la gestion des événements Keyup pour optimiser les recherches AJAX ?

Retarder l'exécution du gestionnaire de touches pour la saisie par l'utilisateur

La recherche de chaque frappe dans un champ de recherche peut entraîner des requêtes AJAX excessives. Pour remédier à cela, il est souhaitable d'introduire un délai qui déclenche une recherche uniquement lorsque l'utilisateur arrête de taper pendant une durée déterminée. Les méthodes traditionnelles telles que setTimeout ne se sont pas révélées efficaces.

Une approche alternative implique la fonction suivante :

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

L'intégration avec le gestionnaire d'événements keyup peut être réalisée comme suit :

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

Cette fonction accepte un rappel et un délai en millisecondes (ms). Il utilise clearTimeout pour éviter le chevauchement des minuteries et planifie une nouvelle minuterie pour chaque événement keyup. Lorsque le délai expire, il appelle le rappel avec le contexte et les arguments transmis au gestionnaire d'événements d'origine.

Cette solution retarde efficacement l'exécution du gestionnaire keyup jusqu'à ce que l'utilisateur arrête de taper pendant la durée spécifiée, optimisant ainsi la recherche. expérience et réduire les requêtes AJAX inutiles.

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!