例如，只需使用ajax.abourt（），就可以在发送类似这样的另一个请求之前中止任何挂起的ajax请求

//check for existing ajax request
if(ajax){ 
 ajax.abort();
 }
//then you make another ajax request
$.ajax(
 //your code here
  );

您可以使用以下命令中止任何连续的ajax调用

<input id="searchbox" name="searchbox" type="text" />

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
     var request = null;
        $('#searchbox').keyup(function () {
            var id = $(this).val();
            request = $.ajax({
                type: "POST", //TODO: Must be changed to POST
                url: "index.php",
                data: {'id':id},
                success: function () {
    
                },
                beforeSend: function () {
                    if (request !== null) {
                        request.abort();
                    }
                }
            });
        });
</script>

无论是jquery ajax对象还是本机XMLHTTPRequest对象，只需调用xhr.abourt（）。

例子：

//jQuery ajax
$(document).ready(function(){
    var xhr = $.get('/server');
    setTimeout(function(){xhr.abort();}, 2000);
});

//native XMLHTTPRequest
var xhr = new XMLHttpRequest();
xhr.open('GET','/server',true);
xhr.send();
setTimeout(function(){xhr.abort();}, 2000);

我已经分享了一个演示，演示了如何取消AJAX请求——如果在预定义的等待时间内没有从服务器返回数据。

HTML格式：

<div id="info"></div>

JS代码：

var isDataReceived= false, waitTime= 1000; 
$(function() {
    // Ajax request sent.
     var xhr= $.ajax({
      url: 'http://api.joind.in/v2.1/talks/10889',
      data: {
         format: 'json'
      },     
      dataType: 'jsonp',
      success: function(data) {      
        isDataReceived= true;
        $('#info').text(data.talks[0].talk_title);        
      },
      type: 'GET'
   });
   // Cancel ajax request if data is not loaded within 1sec.
   setTimeout(function(){
     if(!isDataReceived)
     xhr.abort();     
   },waitTime);   
});

我们只需要解决这个问题，并测试了三种不同的方法。

按照@meouw的建议取消请求执行所有请求，但只处理最后一次提交的结果在另一个请求仍处于挂起状态时阻止新请求

变量Ajax1={调用：函数（）{if（typeof this.xhr！==“undefined”）this.xhr.abourt（）；this.xhr=$.ajax({url:'您的/long/running/request/path'，类型：'GET'，成功：函数（数据）{//过程响应}});}};变量Ajax2={计数器：0，调用：函数（）{var self=此，seq=++此计数器；$.ajax美元({url:'您的/long/running/request/path'，类型：'GET'，成功：函数（数据）{如果（seq==self.counter）{//过程响应}}});}};变量Ajax3={活动：假，调用：函数（）{如果（this.active==false）{this.active=真；var self=this；$.ajax美元({url:'您的/long/running/request/path'，类型：'GET'，成功：函数（数据）{//过程响应},完成：函数（）{self.active=假；}});}}};$（函数）{$（“#按钮”）.click（函数（e）{Ajax3.call（）；});})<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><input id=“button”type=“button“value=“click”/>

在我们的案例中，我们决定使用方法#3，因为它会减少服务器的负载。但我不能100%确定jQuery是否保证调用.complete（）方法，这可能会导致死锁。在我们的测试中，我们无法再现这种情况。

例如，只需使用ajax.abourt（），就可以在发送类似这样的另一个请求之前中止任何挂起的ajax请求

//check for existing ajax request
if(ajax){ 
 ajax.abort();
 }
//then you make another ajax request
$.ajax(
 //your code here
  );