How to control the number of ajax requests?

Question

JavaScript

There is a site on wordpress (although it seems to me there is no difference on what it is). The site has a filter form for products on which there are a bunch of buttons. When choosing different options on the "Show - 9" button, the number after the answer changes, showing the number of products. If you click proportionally on all the buttons and slowly, then everything is fine, but people are savages and will start pressing all the buttons 10,000 times per second (and in principle, the response from the server may be delayed). So the question is how can this be handled? Block form fields until a response is received from the server, but this is not correct. Run the script after a delay of some kind, but it doesn't get how yet. Maybe there are some options from professionals, because I'm still new to this business.

ps There is also an option to create a variable that will bring true from the server, and check even when requesting, if false then the request is not executed, but then the problem of bumping without a request will turn out.

pss it was planned to do this approximately only the number of goods by the number displayed by the incoming mortgage calculator

Answer 1

You can use debounce or 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;
}

Your handler code when using debounce would be:

function handler() {
  // do something
}

var debouncedHandler = debounce(handler, 500);

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

Throttle is similar. There are debounce and throttle
implementations in lodash. If you use this library, you can take it from there.

Answer 2

Delaying submit processing for users who thoughtfully click on buttons is not an option, why offend such people? It's best not to send the next ajax on value changes until the previous request has completed. In this case, you can display some kind of warning sign that you can click, but something is done as soon as the request is completed - you need to check if you need to send it again, with changed values ​​...

Answer 3

- send filter parameters when clicking on 1 button - select
so there will always be delays, the difference is whether you see them or not
, you can still block the form until the answer arrives,
you can display some kind of spinner on the button before sending the request, and after a successful response, overwrite it with a number