在完成前一个 AJAX 请求之前中止新的 AJAX 请求

我有一个函数，它对输入的变化运行 AJAX 调用。

但是，在上一个 ajax 调用完成之前，该函数有可能再次被触发。

我的问题是，如何在启动一个新的 AJAX 调用之前中止前一个 AJAX 调用？ 不使用全局变量。(参见类似问题的答案 给你)

我当前代码的 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>
71286 次浏览
小开 
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);

save in a variable, and then, before sending second time, check its readyState and call abort() if needed

小开

Try this code

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;
}
};
小开
最佳答案 
 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
}
});
小开

a variation on the accepted answer and adopted from a comment on the question - this worked great for my application....

using jQuery's $.post()....

var request = null;


function myAjaxFunction(){
$.ajaxSetup({cache: false}); // assures the cache is empty
if (request != null) {
request.abort();
request = null;
}
request = $.post('myAjaxURL', myForm.serialize(), function (data) {
// do stuff here with the returned data....
console.log("returned data is ", data);
});
}

Call myAjaxFunction() as many times as you like and it kills all except the last one (my application has a 'date selector' on it and changes price depending on the days selected - when someone clicks them fast without the above code, it is a coin toss as to if they will get the right price or not. With it, 100% correct!)

小开 
if(typeof window.ajaxRequestSingle !== 'undefined'){
window.ajaxRequestSingle.abort();
}


window.ajaxRequestSingle = $.ajax({
url: url,
method: 'get',
dataType: 'json',
data: { json: 1 },
success: function (data) {
//...
},
complete: function () {
delete window.ajaxRequestSingle;
}
});

提交答案