Ограничить количество попыток AJAX при запуске Keyup

Question

Я создал поле ввода HTML, которое связано с PHP-скриптом. Когда имя пользователя вводится в поле, он ищет имена пользователей из базы данных без обновления страницы с помощью jQuery/AJAX ниже.

Мой вопрос: код работает, но когда я ввода письмо он выстреливает ад много XHR просит выключить в консоли. Есть ли способ ограничить, сколько раз запросы AJAX POST увольняются в течение определенного периода времени, если да, то как я могу это достичь?

Заранее спасибо.

$(document).ready(function(){ 
    $('#username').keyup(function(){ 
    var username = $('#username').val(); 
     $.ajax({ 
     type:"POST", 
     url:"guild_find.php", 
     data:{username:username}, 
     success:function(res){ 
     $('#userslist').html(res); 

     } 
     }); 
    }); 
}); 

Answer 1

использовать тайм-аут и ясно, что в каждом KeyUp:

$(document).ready(function(){ 
    var myTimeout; 
    $('#username').keyup(function(){ 
     clearTimeout(myTimeout); 
     var username = $('#username').val(); 
     myTimeout = setTimeout(function() { 
      $.ajax({ 
       type:"POST", 
       url:"guild_find.php", 
       data:{username:username}, 
       success:function(res){ 
        $('#userslist').html(res); 
       } 
      }); 
     }, 1000); 
    }); 
}); 

Answer 2

Вы хотите, чтобы обернуть вашу функцию KeyUp с так называемым debounce. Это похоже на дроссельную заслонку событий, но будет гарантировать, что запрос AJAX будет вызван после выполнения последнего нажатия клавиш.

jQuery имеет встроенный дроссель/debounce. Если вы хотите, чтобы ваш запрос будет называться в большинстве каждые 200 мс, вы можете написать:

$("#username").keyup(debounce(ajaxRequestFn, 200); 

где ajaxRequestFn функция, которая выполняет запрос, а debounce реализация, например:

// func  callback function 
// wait  throttle time in ms 
// immediate bool, should callback be called on first event 
function debounce(func, wait, immediate) { 
    var timeout; 
    return function() { 
     var context = this, args = arguments; 
     var later = function() { 
      timeout = null; 
      if (!immediate) func.apply(context, args); 
     }; 
     var callNow = immediate && !timeout; 
     clearTimeout(timeout); 
     timeout = setTimeout(later, wait); 
     if (callNow) func.apply(context, args); 
    }; 
};