Уменьшить количество вызовов AJAX для автозаполнения?

Question

Я отправлял AJAX-запрос на клавиатуре для моего текстового поля поиска, но я хочу подождать 1 секунду после того, как пользователь перестанет печатать.

Код у меня есть:

searchBar = $('#searchBar');
searchBar.timerID = null;
searchBar.textBox = $('#searchBar > input[name="q"]');
searchBar.textBox.sendQuery = function(){
  alert('SEND AJAX HERE');
  searchBar.timerID = null;
};
searchBar.textBox.keyup(function() {
  if(searchBar.timerID){ clearTimeout(searchBar.timerID); }
  searchBar.timerID = setTimeout(searchBar.textBox.sendQuery, 1000);
});

Вроде бы работает, но лучший ли способ об этом?

Answer 1

Не рекомендуется загрязнять возвращаемый объект jQuery, как $('#searchBar').value = 'blah' - вместо этого вы должны использовать метод .data:

Вам вообще не нужен searchBar, просто поместитетаймер на соответствующем элементе ввода.Я всегда добавляю префикс jQuery к $ для лучшего понимания.

$input = $('#searchBar input[name="q"]');

var sendQuery = function() {
  alert('SEND AJAX HERE');
};

$input.keyup(function() {
  var timer = $(this).data('timerID');
  if (timer) {
      clearTimeout(timer);
  }
  $(this).data('timerID', setTimeout(sendQuery, 1000));
});

Answer 2

Этот плагин запустит событие после небольшой задержки. Затем вы можете использовать что-то вроде следующего:

$(searchBar).bindWithDelay("keyup", callback, 1000);

Answer 3

Загляните в плагин отладки Бена Алмана http://benalman.com/projects/jquery-throttle-debounce-plugin/