取消之前的ajax请求jquery

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

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

然后在beforeSend ajax事件中使用DataRequest.abort() 。 但是，这会导致发送NO请求。

我想要实现的是中止任何声明为DataRequest的ajax操作（例如），并且只允许最新的请求继续进行。 目前我有一个按钮，当点击它时启动一个请求并添加一个加载微调器。 如果我多次点击它，我只是得到一堆加载的微调填充我的页面。 我怎么能阻止这个？

这是相关的代码：

 beforeSend: function() { $('
') .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 }); }); 

编辑 ：我已经在这个类似插件的方法调用中包装了这个function：
在返回之前取消jQuery AJAX调用？

Answer 2

为什么不将加载微调器作为标记的一部分并隐藏（或插入页面加载）。 然后在beforeSend中显示代码以显示它，这样，当多次按下按钮时，您将不会插入多个微调器。

 beforeSend：function（）{
    $（'＃装载“）显示（）。
 }）;

除非您有意多次按下该按钮…请在第一次单击后禁用该按钮。 比试图中止最后一个ajax请求简单得多。