How to make the script not duplicate requests?

Question

JavaScript

Good afternoon!
How to make the script not send a request to the server until it has finished 1 request?
There is a script which processes actions in the form. If you click on the checkbox 4 times, then it will send 4 requests in turn, each for 3 seconds with animation. How to make sure that while at least 1 request is being executed, the script does not create a queue at all. Ignored form actions.

$(document).ready(function(){
    var $form = $('#filter'),
        $controls = $form.find('input,select,textarea');

    $controls.on('change', function(){
         startLoadingAnimation();
        $.post("/engine/ajax/filter.php", $("#filter").serialize(), function(response){
           
           setTimeout(function(){$('#dle-content').html(response); stopLoadingAnimation();}, 3000);
    });
             });
});
         
         
 function startLoadingAnimation() 
{
   $("#dle-content").append('<div id="res"><img src="http://katushka.in.ua/templates/katushka2/images/ajax-loader.gif" /></div>');
}
          
function stopLoadingAnimation() 
{
   $("#res").remove();
}

Thank you!

Answer 1

If a person has done n-actions, will he wait until the entire queue of n-actions has passed? At a minimum, you can make a timer that makes a request in n seconds if the user has not changed anything else. And so that there is no queue, then you can, as an option, cancel old requests, since they are no longer needed, the user has changed something

var currentAjaxRequest;

$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
    if(options.abortOnRetry) {
        if(currentAjaxRequest  && currentAjaxRequest.readyState != 4) {
        currentAjaxRequest.abort();
        }
    
    currentAjaxRequest = jqXHR;
    }
});

Answer 2

It all depends on the specific application logic.
The simplest thing is to disable controls for the duration of the request:

$(document).ready(function () {
    var $form = $('#filter'),
        $controls = $form.find('input,select,textarea');

    $controls.on('change', function () {
        var $control = $(this);
        
        $control.prop('disabled', true)
        
        startLoadingAnimation();
        
        $.post(
            "/engine/ajax/filter.php",
            $("#filter").serialize(),
            function (response) {
                setTimeout(function () {
                    $('#dle-content').html(response);
                    stopLoadingAnimation();
                }, 3000);
        	}
        ).always(function () {        	
        	$control.prop('disabled', true)
        });
    });
});

function startLoadingAnimation() {
    $("#dle-content").append('<div id="res"><img src="http://katushka.in.ua/templates/katushka2/images/ajax-loader.gif" /></div>');
}

function stopLoadingAnimation() {
    $("#res").remove();
}

Answer 3

It is necessary to set the flag that the request has gone, and remove it as soon as the response from the server has arrived.

// ...

var processing = false; // флаг

$controls.on('change', function() {
  if (processing) return; // если флаг есть, то выходим из обработчика

  processing = true; // устанавливаем флаг
  startLoadingAnimation();

  $.post("/engine/ajax/filter.php", $("#filter").serialize(), function(response) {
    processing = true; // снимаем флаг как только пришел ответ от сервера

    setTimeout(function() {
      $('#dle-content').html(response);
      stopLoadingAnimation();
      
      // или в этом месте (в зависимости от задачи)
    }, 3000);
  });
});

// ...