Comment déclencher une fonction JavaScript uniquement une fois que l'utilisateur a fini de taper ?

Comment exécuter une fonction JavaScript à la fin de la saisie de l'utilisateur

Pour exécuter une fonction JavaScript uniquement lorsque l'utilisateur a fini de taper dans une zone de texte, plutôt qu'à chaque frappe, il est crucial d'éviter les requêtes AJAX excessives et d'éviter d'avoir besoin d'une touche de saisie manuelle presses.

Solution utilisant jQuery

La solution consiste à utiliser une minuterie pour détecter le moment où l'utilisateur a interrompu la saisie pendant une durée spécifiée. Voici une implémentation étape par étape :

1. Établissez une variable de minuterie (typingTimer) pour suivre le temps écoulé depuis la dernière libération de la touche.
2. Définissez un intervalle de temps souhaité (doneTypingInterval) dans lequel attendre après le dernier relâchement de la touche avant d'exécuter la fonction.
3. Lors des événements keyup, démarrez le minuteur et effacez tout précédent minuterie.
4. Lors des événements de frappe, effacez la minuterie pour réinitialiser le compte à rebours.
5. Lorsque l'utilisateur a interrompu la saisie pendant la durée spécifiée, effacez la minuterie et exécutez la fonction souhaitée.

// Setup before functions
var typingTimer; // Timer identifier
var doneTypingInterval = 5000; // Time in ms, e.g., 5 seconds
var $input = $('#myInput');

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

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

// Execute function after user has finished typing
function doneTyping() {
  // Your desired action
}

En implémentant cette solution, la fonction JavaScript ne s'exécutera que lorsque l'utilisateur aura terminé de taper et mis en pause pendant la durée spécifiée, offrant ainsi une navigation plus fluide et plus efficace. expérience utilisateur pour les opérations AJAX et autres actions déclenchées par la saisie de texte.

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!