在新请求中取消先前的ajax请求

我有一个函数,在input的变化上运行ajax调用。

但是,在前面的ajax调用完成之前,有可能会再次触发该函数。

我的问题是,如何在开始新的ajax调用之前中止以前的ajax调用? 不使用全局variables。 (请参阅这里回答一个类似的问题)

我目前的代码jsfiddle :

使用Javascript:

var filterCandidates = function(form){ //Previous request needs to be aborted. var request = $.ajax({ type: 'POST', url: '/echo/json/', data: { json: JSON.stringify({ count: 1 }) }, success: function(data){ if(typeof data !== 'undefined'){ jQuery('.count').text(data.count) console.log(data.count); } } }); }; if(jQuery('#search').length > 0){ var form = jQuery('#search'); jQuery(form).find(':input').change(function() { filterCandidates(form); }); filterCandidates(form); } 

HTML:

 <form id="search" name="search"> <input name="test" type="text" /> <input name="testtwo" type="text" /> </form> <span class="count"></span> 
  var currentRequest = null; currentRequest = jQuery.ajax({ type: 'POST', data: 'value=' + text, url: 'AJAX_URL', beforeSend : function() { if(currentRequest != null) { currentRequest.abort(); } }, success: function(data) { // Success }, error:function(e){ // Error } }); 
 var filterCandidates = function(form){ //Previous request needs to be aborted. var request = $.ajax({ type: 'POST', url: '/echo/json/', data: { json: JSON.stringify({ count: 1 }) }, success: function(data){ if(typeof data !== 'undefined'){ jQuery('.count').text(data.count) console.log(data.count); } } }); return request; }; var ajax = filterCandidates(form); 

保存在一个variables中,然后在发送第二次之前,检查它的readyState并在需要时调用abort()

试试这个代码

 var lastCallFired=false; var filterCandidates = function(form){ if(!lastCallFired){ var request = $.ajax({ type: 'POST', url: '/echo/json/', data: { json: JSON.stringify({ count: 1 }) }, success: function(data){ if(typeof data !== 'undefined'){ jQuery('.count').text(data.count) console.log(data.count); } } }); setInterval(checkStatus, 20); } }; if(jQuery('#search').length > 0){ var form = jQuery('#search'); jQuery(form).find(':input').change(function() { filterCandidates(form); }); filterCandidates(form); } var checkStatus = function(){ if(request && request.readyState != 4){ request.abort(); } else{ lastCallFired=true; } };