Comment optimiser les requêtes Ajax en détectant la fin des entrées utilisateur ?

Exécution de requêtes Ajax à la fin de la saisie de l'utilisateur

De nombreuses applications nécessitent le déclenchement d'actions lors de la saisie de l'utilisateur en temps réel. Cependant, il peut s'avérer inefficace d'exécuter les requêtes du serveur à chaque frappe, car cela peut inonder le système et potentiellement submerger le serveur. Cela est particulièrement vrai dans des situations telles que la saisie dans un champ de recherche, où de nombreuses requêtes seraient générées.

Mise en œuvre d'une détection d'achèvement de saisie

Pour résoudre ce problème, une solution consiste à détecter lorsque l'utilisateur a fini de taper avant de lancer la requête ajax. Ceci peut être réalisé en configurant une minuterie. Voici comment cela fonctionne :

1. Initialisation de la minuterie :

   • Initialisez une minuterie à l'aide de la fonction setTimeout de JavaScript et réglez-la sur la durée souhaitée après lequel l'action sera déclenchée. Par exemple, vous pouvez définir une minuterie de 5 secondes.

2. Démarrage/réinitialisation de la minuterie :

   • Lorsque l'utilisateur tape un caractère (événement keyup), réinitialise le minuteur. Cela garantit que la minuterie surveille toujours les frappes au clavier.

3. Arrêt de la minuterie :

   • Lorsque l'utilisateur relâche la touche ( événement keydown), effacez la minuterie. Cela évite que l'action ne soit déclenchée prématurément.

4. Exécution de l'action :

   • Lorsque le délai expire (c'est-à-dire que le l'utilisateur n'a rien tapé pendant la durée spécifiée), exécutez l'ajax demande.

Exemple de code utilisant jQuery :

var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 seconds for example
var $input = $('#myInput');

//on keyup, start the countdown
$input.on('keyup', function () {
  clearTimeout(typingTimer);
  typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$input.on('keydown', function () {
  clearTimeout(typingTimer);
});

//user is "finished typing," do something
function doneTyping () {
  //do something, such as execute your ajax request
}

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!