Как сделать чтобы скрипт не дублировал запросы?

Question

[Ayk72]

Добрый день!

Как сделать, чтобы скрипт не отправлял на сервер запрос, пока не закончил 1 запрос?

Есть скрипт, который обрабатывает действия в форме. Если нажать на checkbox 4 раза, то он будет в порядке очереди 4 запроса отправлять, каждый по 3 секунды с анимацией. Как сделать, чтобы пока выполняется хотя бы 1 запрос, скрипт очередь вообще не создавал. Игнорировал действия формы.

$(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();
}

Спасибо!

Comments

[Ayk72]

P.S.Нужно сделать, чтобы он отменил тот запрос, который сейчас выполняется, и сразу бросить обработку и начать выполнять последний запрос?

Answer 1

[Arman]

Если человек сделал n-действий, то будет ждать, пока пройдет вся очередь из n-действий? Как минимум можно сделать таймер, который делает запрос через n-секунд, если пользователь больше ничего не менял. А чтоб очереди не было, то можно как вариант отменять старые запросы, так как уже не нужны, юзер что-то поменял

var currentAjaxRequest;

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

Comments

[Ayk72]

А как сделать, чтобы он отменил тот запрос, который сейчас выполняется, и сразу бросить обработку и начать выполнять последний запрос?

Answer 2

[Алексей Уколов]

Всё зависит от конкретной логики приложения.
Самое простое - отключать контролы на время выполнения запроса:

$(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();
}

Comments

[Ayk72]

А как сделать, чтобы он отменил тот запрос, который сейчас выполняется, и сразу бросить обработку и начать выполнять последний запрос?

Answer 3

[GreatRash]

Надо установить флаг, что запрос пошел, и снимать его как только пришел ответ от сервера.

// ...

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);
  });
});

// ...

Comments

[Ayk72]

А как сделать, чтобы он отменил тот запрос, который сейчас выполняется, и сразу бросить обработку и начать выполнять последний запрос?

[GreatRash]

Ayk72:

// ...

var processing = false; // флаг
var xhr = null; // тут храним запрос

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

  if (xhr && xhr.readyState !== 4) {
    xhr.abort(); // отменяем запрос если он послан и пока ничего не вернул
  }

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

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

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

// ...

[Ayk72]

GreatRash: почему-то не сработал. "processing = true; // снимаем флаг как только пришел ответ от сервера" тут ведь вместо true - false? Заменил и поставил перед "}, 3000);" работает то, что только 1 запрос за раз. Но функция прерывания запроса и начала обработки другого не работает почему-то

[GreatRash]

Ayk72: Если мы прервали текущий запрос, то processing так и останется true, т.е. коллбек не вызовется - запроса то больше нет. Нужно после аборта процессинг тоже сбрасывать.

И да, я там перепутал тру и фолс.