Как контролировать количество ajax запросов?

Question

[Алекс]

Имеется сайт на wordpress (хотя мне кажется нет разницы на чем он). На сайте есть форма фильтр для товаров на которой куча кнопочек. При выборе различных параметров на кнопке "Показать - 9" меняется цифра после ответа, показывающая количество товаров. Если кликать соразмерено по всем кнопкам и не торопясь то все норм, но люди дикари и начнут 10 000 раз в секунду жать по всем кнопкам (да и впринципе может ответ от сервера задержаться). Так вот вопрос каким образом можно это обрабатывать? Блокировать поля формы пока ответа от сервера не дождались, но это не правильно. Запускать скрипт после задержки какой-то, но пока не доходит как. Может есть какие-то варианты от профессионалов, потому что я еще новичек в этом деле.

p.s. Вариант есть еще создать переменную которая будет приносить с сервера true, и проверять еще при запросе если false то запрос не выполнять, но тогда проблема натыкивания без запроса получится.

p.s.s. планировалось сделать такое примерно только количество товаров числом выводится набегающим ипотечный калькулятор

Comments

[mirexdoors]

Сделайте прелоадер на время подгрузки

Answer 1

[Антон Спирин]

Можно использовать debounce или throttle:

function debounce(f, ms) {

  let timer = null;

  return function (...args) {
    const onComplete = () => {
      f.apply(this, args);
      timer = null;
    }

    if (timer) {
      clearTimeout(timer);
    }

    timer = setTimeout(onComplete, ms);
  };
}

function throttle(func, ms) {

  var isThrottled = false,
    savedArgs,
    savedThis;

  function wrapper() {

    if (isThrottled) { // (2)
      savedArgs = arguments;
      savedThis = this;
      return;
    }

    func.apply(this, arguments); // (1)

    isThrottled = true;

    setTimeout(function() {
      isThrottled = false; // (3)
      if (savedArgs) {
        wrapper.apply(savedThis, savedArgs);
        savedArgs = savedThis = null;
      }
    }, ms);
  }

  return wrapper;
}

Код вашего хандлера при использовании debounce будет такой:

function handler() {
  // do something
}

var debouncedHandler = debounce(handler, 500);

document.querySelecror('.submit').addEventListener('click', debouncedHandler);

С throttle аналогично.

Реализации debounce и throttle есть в lodash. Если используете эту библиотеку можно взять оттуда.

Answer 2

[ksnk]

Задерживать обработку сабмита для юзеров, которые вдумчиво кликают на кнопки не вариант, зачем таких обижать? Лучше не посылать следующий ajax при изменении значений, пока не выполнился предыдущий запрос. При этом можно выводить какой-нибудь предупредительный знак, что кликать можно, но что-то делается, как только выполнился запрос - нужно проверить, не нужно ли послать его еще раз, с измененными значениями...

Answer 3

[Виталий]

-параметры фильтра отсылать при клике на 1 кнокупку - подобрать

да и впринципе может ответ от сервера задержаться

так всегда будут задержки, разница в том видите ли вы их или нет
можно еще блочить форму, пока ответ не пришел
можно какой то спиннер какой на кнопку вывести до отправки запроса, а после успешного ответа его перезаписать числом