Question

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

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

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

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

Answer 2

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

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

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

取消之前的ajax请求jquery

2 个答案: