Агрегирование / сбор запросов AJAX

Question

У меня есть ситуация, когда пользователь может манипулировать большим набором данных (представленным в таблице) с помощью набора фильтров, представленных в виде флажков.

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

Это отлично работает. Однако при использовании этого способа возникает проблема с удобством использования и производительностью. Например, если пользователь нажимает 6 флажков, запускаются 6 запросов AJAX, и все они возвращаются через различные промежутки времени, в результате чего страница обновляется 6 раз. Скорее всего, это будет раздражать пользователя и кажется неэффективным.

Я хочу установить какое-то время ожидания в обработчике событий, чтобы сделать что-то вроде этого: «Подождите 1 секунду, и если больше нет нажатых фильтров, вызовите запрос AJAX». Однако на данный момент мне удалось задержать все 6 запросов только на 1 секунду. Я не уверен, как объединить / собрать информацию фильтра в 1 запрос AJAX.

Любые предложения будут с благодарностью!

Answer 1

Сначала проверьте события "click", чтобы увидеть, есть ли таймер. Если это так, щелчок должен отменить его и запустить новый таймер.

(function() {
  var timeout = null;
  $('#yourForm').find('input:checkbox').click(function() {
    clearTimeout(timeout);
    timeout = setTimeout(function() {
      doTheAjaxStuff();
    }, 500);
  });
})();

Нечто подобное будет означать, что до тех пор, пока пользователь не приостановит свое дикое безумие проверки окна на полсекунды, никаких запросов AJAX не будет. Как только пользователь делает паузу, запрос должен передать текущее состояние всех флажков, чтобы можно было сделать соответствующие обновления. Обратите внимание, что это означает, что вам может потребоваться изменить способ работы действий сервера, поскольку у вас не будет отдельных вызовов AJAX для каждого входа.

Answer 2

jQuery имеет некоторые встроенные функции для этого, если это то, что вам нужно. Если вы просто сохраняете результаты для обновления страницы и , используйте $.ajaxStop(). Это срабатывает только тогда, когда нет ожидающих запросов, поэтому после завершения последнего запроса. Если вы стреляете 5 раз подряд, то все они возвращаются друг к другу, это вызывается один раз, что, кажется, вам и нужно.

Описание .ajaxStop () :

Всякий раз, когда Ajax-запрос завершается, jQuery проверяет, есть ли другие ожидающие Ajax-запросы. Если ничего не осталось, jQuery вызывает событие ajaxStop. Все обработчики, которые были зарегистрированы с помощью метода .ajaxStop(), выполняются в это время.

Вы можете использовать это так:

$(document).ajaxStop(function() {
  $("#myPageElement").html($("#resultStore").html());
  $("#resultStore").empty(); //Cleanup
});

В ваших звонках ajax:

$.ajax({
  //Existing stuff...
  success: function(data) {
    $("#resultStore").html(data);
  });
});

Таким образом, все ваши запросы выполняются в обычном режиме, мы просто обновляем содержимое один раз в конце, не зная, как это сделать намного проще :) Это также имеет то преимущество, что в случае сбоя любого из запросов используется последний успешный. обновить страницу.

Answer 3

Первый - попробуйте использовать плагин jQuery Grid - некоторые столбцы будут сортироваться на стороне клиента. Второе - может быть, вы можете сделать кнопку «ОК» для отправки параметров запроса!?

Answer 4

Вы можете сделать это, установив флажок в событии первого клика, чтобы запустить только один таймер:

if (!ajaxRequestsPending) {
  ajaxRequestsPending = true;
  window.setTimeout(...);
}

Код, который фактически выполняет запрос ajax, сбросит флаг.