JS Ajax appel: besoin de dormir, vérifier si plus de caractères ont été saisis puis exécuter

Question

J'ai une application qui comprend une fonction de recherche. Cette fonctionnalité est implémentée en ayant un utilisateur tapez un terme dans une barre de recherche. Une fois que l'utilisateur entre 3 caractères, un appel ajax est démarré. Je pensais que ce serait suffisant, mais il se trouve qu'il y a un bug que je pense avoir à faire avec le calendrier et le fait que plusieurs appels ajax peuvent être effectués en succession rapide en tapant simplement un terme de recherche sur 4 caractères.

Ce que je voudrais faire est la suivante:

1. utilisateur commence à taper
2. script vérifie 3+ caractères
3. une fois 3 caractères sont tapés, attendez (en utilisant setTimeout peut-être)
4. fois le délai d'expiration est atteint, vérifiez si plus de caractères ont été entrés
5. boucle 3 & 4 jusqu'à ce que vous n'ayez plus entré de caractères pendant 1-2 secondes
6. faire appel ajax ... rest est tous ensemble ...

ma question: je sais comment je ferais tout sauf pour vérifier plus de personnages venant peut-être quelque chose comme ceci:.

var searchTerm; 
function wait(userInput){ 
    if(userInput.length < 3){return 0;} 
    searchTerm = userInput; 
    setTimeout(function(){checkInput(userInput);}, 1000); 
} 

function checkInput(userInput){ 
    if (userInput == searchTerm){ 
     ... do AJAX call ... 
    } else { 
     return 0; 
    } 
} 

C'est juste à côté de la manchette et probablement ne fonctionnerait pas tout de suite. De toute façon, toute aide, conseil ou direction serait grandement appréciée.

Merci, Tim

Answer 1

Vous devez garder la longueur de votre chaîne saisie chaque fois que votre méthode d'attente est appelée par le rappel textbox html.

Si la longueur de la chaîne en cours est égale à la longueur précédente, pas de caractères ont été ajoutés à cet intervalle afin que vous puissiez appeler ajax, sinon continuer à attendre

var timerHandle = null; 
    var currLen = 0; 
    function wait(userInput) 
    { 
     currLen = userInput.length; 
     if(currLen < 3) 
     { 
      return 0; 
     } 

     if(timerHandle) 
     { 
      clearTimeout(timerHandle); 
      timerHandle = null; 
     } 
     timerHandle = setTimeout(function(){checkInput(userInput);}, 1000); 
    } 


function checkInput(userInput) 
{ 
    timerHandle = null; 
    if (currLen == userInput.length) 
    { 
     ... do AJAX call ... 
    } else { 
     return 0; 
    } 
}