在完成上一个请求之前中止新的 AJAX 请求
Abort new AJAX request before completing the previous one
我有一个函数,可以在输入更改时运行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>
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);
保存在变量中,然后在第二次发送之前,检查其readyState
并在需要时调用abort()
对已接受答案的变体,并从对问题的评论中采用 - 这对我的应用程序非常有用......
使用 jQuery 的 $.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);
});
}
调用myAjaxFunction((可以多次,它会杀死除最后一个之外的所有内容(我的应用程序上有一个"日期选择器"并根据所选日期更改价格 - 当有人在没有上述代码的情况下快速单击它们时,这是一个抛硬币关于他们是否会得到正确的价格。 有了它,100% 正确!
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;
}
});
试试这段代码
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;
}
};
相关文章:
- ajax请求的顺序总是不同的
- 从ajax请求中获取javascript对象
- Ajax请求文档就绪会导致jquery加载缓慢
- MockJax没有在JavaScript应用程序中发送对我AJAX请求的响应
- 正在传递JSONP标头's数据参数到另一个文件中的AJAX请求
- JavaScript代码未正确检查ajax请求
- node.js请求数据事件未在CORS ajax调用中触发
- jQuery Ajax GET请求工作不正常
- "日期“;AJAX请求返回的类型值未定义
- Django - 响应请求 AJAX
- 使用 jQuery 的 CORS 请求 - $.ajax()
- 如果无线电值为 ==1,则请求 ajax
- 如何处理对循环中发出的多个异步请求(AJAX 调用)的响应
- POST请求ajax jquery错误
- CasperJS don'我没有请求AJAX
- 使用这种Facebook风格的Lightbox-请求AJAX-在一个页面上覆盖多个按钮
- 400错误请求ajax post请求
- 如何在开始发送请求ajax之前延迟3秒
- 与jQuery同时请求AJAX
- 使用POST请求AJAX发送json对象