jQuery: как добавить задержку в запрос ajax?

Question

У меня есть функция, которая возвращает определенное количество данных, запущенных в AJAX при типизации.

Но, как только я набираю "длинную" строку типа "привет, меня зовут", он запускает один запрос каждый раз, когда я набираю ключ (10 запросов за один раз, и получение 5 секундзапрос ответа).

Как избежать этого, пожалуйста?(я не хочу использовать .onblur)

$(document).ready(function()
    {
      $('.search input[type="submit"]').hide();

      $('#search_keywords').keyup(function(key)
      {
        if (this.value.length >= 2 || this.value == '')
        {
          $('#loader').show();
          $('#jobs').load(
            $(this).parents('form').attr('action'),
            { query: this.value + '*' },
            function() { $('#loader').hide(); }
          );
        }
      });
    });

Спасибо;)

Answer 1

Я склонен устанавливать таймер для этого события keyup, например:

$('#search_keywords').keyup(function() {
  clearTimeout($.data(this, 'timer'));
  $(this).data('timer', setTimeout($.proxy(search, this), 500));
});
function search()  {
  if (this.value.length >= 2 || this.value == '') {
    $('#loader').show();
    $('#jobs').load(
      $(this).parents('form').attr('action'),
      { query: this.value + '*' },
      function() { $('#loader').hide(); }
    );
  }
}

Это разбивает ваш поиск на другую функцию, и мы просто задерживаем 500 мс между нажатием клавиши и включением этой функции поиска. Если вы наберете другую букву, таймер 500 мс будет сброшен с clearInterval(), поэтому быстрый набор не вызовет 20 событий, а только после того, как вы сделаете паузу в полсекунды, сработает. Часть $.proxy() обеспечивает правильное значение this при выполнении setTimeout().