jquery - 取消之前的ajax请求jquery

Question

根据我的阅读，一般解决方案如下:

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

然后是 beforeSend ajax 事件中的 DataRequest.abort()。但是，这会导致不发送任何请求。

我想要实现的是中止任何声明为 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
  });
});

编辑:我已将此功能封装在类似插件的方法调用中:
Cancel a jQuery AJAX call before it returns?