подход к реализации очереди AJAX

Question

• JQuery 2.0.3

Я хочу, чтобы выстрелить вызов AJAX при изменении данных в элементе управления редактирования ввода. Я понимаю, что могу сделать это через событие onChange. Однако, если пользователь вводит: 123 я не хочу запускать AJAX 3 раза.

Вместо этого я хочу дождаться «периода установки», а затем погасить вызов. Период настройки сбрасывается при каждом изменении элемента управления. Таким образом, идея заключается в том, что я быстро набираю 123, некоторое время проходит (поселяется), и я делаю вызов AJAX.

Есть ли у кого-нибудь предложения о том, как реализовать это с помощью jQuery? Существуют ли какие-либо конструкции, которые я могу использовать в jQuery для этого?

Answer 1

Вам нужно душить событие с таймаутом

$('input').on('keyup', function() { 
    var self = this; 

    clearTimeout($(this).data('timer')); 

    $(this).data('timer', 
     setTimeout(function() { 
      $.ajax({ 
       url : 'someurl.php', 
       data : self.value 
      }); 
     }, 500) 
    ) 
}) 

Answer 2

Легкий путь с SetTimeout/clearTimeout на события изменения:

var timeout = null; 
$('input').bind('keyup blur', function() { 
    if (timeout !== null) clearTimeout(timeout); 
    timeout = setTimeout(function() { 

     // Make your ajax request here 

    }, 300); 
}); 

Изменение 300 на число миллисекунд, которые вы хотите, чтобы ждать, прежде чем запрос Ajax сделан.