JQuery AJAX живой вопрос проверки / тайм-аут

Question

Я все еще новичок в jQuery, так что, возможно, есть простое решение, но я ничего не могу найти. Я сделал эту регистрационную форму, которая проверяет, будет ли введено имя пользователя или адрес электронной почты, когда пользователь вводит имя пользователя. По сути, он просто делает запрос json, который возвращает истину или ложь в зависимости от того, занято ли имя пользователя или адрес электронной почты.

Проблема в том, что теперь он делает запрос практически на каждое нажатие клавиши, которое пользователь нажимает, сфокусировавшись на поле, если длина входного текста превышает 3 символа. Пока это работает, но это много запросов к серверу. Я бы хотел, чтобы он делал запрос только тогда, когда пользователь не набрал, скажем, полсекунды.

Есть идеи, как мне это сделать?

$(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

Для ожидания промежутка времени, прошедшего с момента последнего нажатия клавиши, вы можете сделать что-то вроде плагина jQuery.typeWatch .

Здесь я публикую вам легкую реализацию концепции:

Использование:

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

Реализация:

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 использует плагин, о котором я упоминал, для окрашивания синтаксиса кода в редакции.

Answer 2

Вы можете использовать window.setTimeout и window.clearTimeout. По сути, запускаем функцию, которая вызывается за x миллисекунд, и если заранее было вызвано другое событие нажатия клавиши, вы очищаете этот обработчик и запускаете новый.

 //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

}