Jquery ajax live validation/timeout question

Question

Je suis encore un peu nouveau sur jQuery, donc il y a probablement une solution facile, mais je ne trouve rien. J'ai fait ce formulaire d'inscription, qui vérifie si le nom d'utilisateur ou l'email est pris que l'utilisateur tape le nom d'utilisateur. Fondamentalement, il fait juste une demande de JSON qui renvoie vrai ou faux selon si le nom d'utilisateur/email est déjà pris. Le problème, c'est que maintenant il fait une demande sur pratiquement chaque pression de touche que l'utilisateur effectue en se concentrant sur le champ si le texte d'entrée est plus de 3 caractères. Pour l'instant, cela fonctionne, mais c'est beaucoup de demandes de serveur. Je voudrais qu'il fasse une demande seulement quand l'utilisateur n'a pas tapé, par exemple, une demi-seconde.

Des idées sur comment je pourrais être en mesure de faire cela?

$(document).ready(function() { 
$("#user_username").keyup(function() { 
    var ln = $(this).val().length; 
    if (ln > 3) { 
     $.getJSON("/validate/username/", 
     {value:$(this).val()}, 
     function(data){ 
      if (data.reg == true) { 
       $("#status-for-username").html("Username already in use"); 
      } else { 
       $("#status-for-username").html("Username available"); 
      } 
     }); 
    } 
}); 
$("#user_email").keyup(function() { 
    var ln = $(this).val().length; 
    if (ln > 3) { 
     $.getJSON("/validate/email/", 
     {value:$(this).val()}, 
     function(data){ 
      if (data.reg == true) { 
       $("#status-for-email").html("E-mail already in use"); 
      } else { 
       $("#status-for-email").html(""); 
      } 
     }); 
    } 
}); 

});

Answer 1

Pour attendre un laps de temps depuis la dernière séquence de touches, vous pourriez faire quelque chose comme le plug-in jQuery.typeWatch fait.

Ici, je vous poste une mise en œuvre légère du concept:

Utilisation:

$("#user_username").keyup(function() { 
    typewatch(function() { 
    // executed only 500 ms after the last keyup event. 
    }, 500); 

Mise en œuvre:

var typewatch = function(){ 
    var timer = 0; // store the timer id 
    return function(callback, ms){ 
     clearTimeout (timer); // if the function is called before the timeout 
     timer = setTimeout(callback, ms); // clear the timer and start it over 
    } 
}(); 

StackOverflow utilise le plugin que je mentionne, pour la coloration syntaxique du code sur édition.

Answer 2

Vous pouvez utiliser window.setTimeout et window.clearTimeout. Déclenchez fondamentalement une fonction à invoquer en x millisecondes et si un autre événement de pression de touche est déclenché à l'avance, vous effacez ce gestionnaire et en commencez un nouveau.

//timeout var 
var timer; 
$('#username').keyUp(function(){ 
    //clear any existing timer 
    window.clearTimeout(timer); 
    //invoke check password function in 0.5 seconds 
    timer = window.setTimeout(checkPasswordFunc, 500); 
}); 

function checkPasswordFunc(){ 
    //ajax call goes here 

}