Отмена предыдущего запроса AJAX JQuery

Question

Из того, что я прочитал, общее решение этой проблемы выглядит следующим образом:

var DataRequest = $.ajax({ /* ... */ });

, а затем DataRequest.abort() в событии beforeSend ajax.Однако это приводит к тому, что НИКАКИЕ запросы не отправляются.

Я пытаюсь добиться прекращения любых операций ajax, которые объявлены как DataRequest (например), и разрешить выполнение только последнего запроса.В настоящее время у меня есть кнопка, которая при нажатии запускает запрос и добавляет спиннер загрузки.Если я нажимаю на нее много раз, я просто получаю кучу загрузочных блесен, заполняющих мою страницу.Как я могу предотвратить это?

Вот соответствующий код:

beforeSend: function() {
    $('<div class="grid"></div>')
        .attr('id', 'loading')
        .hide()
        .insertBefore('#output')
        .fadeIn();
},

success: function(data) {
    $('#loading').hide(function () {
        $(this).remove();
    });
}

Answer 1

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

var fooXHR, fooCounter=0;
$(...).bind( 'someEvent', function(){
  // Do the Right Thing to indicate that we don't care about the request anymore
  if (fooXHR) fooXHR.abort();

  var token = ++fooCounter;
  fooXHR = $.get( ..., function(data){
    // Even aborted XHR may cause the callback to be invoked
    if (token != fooCounter) return;

    // At this point we know that we're using the data from the latest request
  });
});

Редактировать : я обернул эту функцию в подобный плагину методпозвоните сюда:
Отмена вызова JQuery AJAX до его возвращения?

Answer 2

Почему бы не включить загрузочный счетчик как часть разметки и скрыть его (или вставить при загрузке страницы). Затем укажите код в beforeSend, чтобы показать его, таким образом, вы не вставите многократный счетчик при многократном нажатии кнопки.

beforeSend: function () {
   $('#loading").show();
});

Если вы намеренно не хотите, чтобы кнопка нажималась несколько раз ... рассмотрите возможность отключения кнопки после первого щелчка. Гораздо проще, чем пытаться прервать последний запрос ajax.