取消先前的ajax请求jQuery

Question

从我读过的一般解决方案如下：

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

然后DataRequest.abort()在beforeSendajax事件中。但是，这导致没有请求被发送。

我要实现的目标是中止所有声明为DataRequest的ajax操作（例如），并仅允许进行最新请求。目前，我有一个按钮，单击该按钮可以启动请求并添加加载微调器。如果多次单击它，只会使一堆加载微调器充满我的页面。我该如何预防？

以下是相关代码：

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