假设我现在有几个用 li 标签做的按钮,还有时间控件和下拉框。li 的点击操作、时间控件的选择时间操作、下拉框的change事件都用调用同一个ajax。请问,如何在用户做某一种操作调用ajax请求成功之前,阻止用户再次点击其它标签进行ajax请求操作?
回答:
例子如下,第一种是拦截重复请求,第二种每次请求都接受同时丢弃旧请求。
如果是拦截重复请求,通常还要给按钮加上 disabled 状态切换。
// 方法一,通过加载状态判断
// 默认值
var loading;
function ajaxload() {
// 先判断,为 true 就拦截
if (loading === true) {
alert('loading... try later.');
return false;
}
// 发出请求之前先设置状态 true
loading = true;
$.ajax({
url: 'test.html'
}).done(function() {
alert('done!');
// 完成后设为 false
loading = false;
});
}
// 方法二,有新请求直接丢弃旧请求
var xhr;
function ajaxload() {
// 之前如果有未完成的请求直接丢弃
// 这是字面意思的丢弃,只是客户端丢弃请求
// 在这之前服务器如果收到了请求还是会返回结果的
// 只是客户端不再理会服务器的响应而已
if (xhr && xhr.readyState != 4) {
xhr.abort();
}
xhr = $.ajax({
url: 'test.html'
}).done(function() {
alert('done!');
});
}
回答:
你可以给把那些标签归个类,额外添加两个属性,一个类似组的标志,比如可以添加一个空属性的class属性用于组名,再一个类似开关的标志,比如处于请求的标签多了on的属性,当要发生请求的时候,看组内有没有on属性开关处于开的状态即可,此种实行只要基于jquery的contains选择器就可以。
回答:
用一个变量充当开关,每次发起 ajax 之后开关关闭,ajax 请求成功之后,再将变量恢复初始值
回答:
通过一个布尔值控制,true就是可以请求,false就是不可以请求,点击后为false,ajax请求成功为true
回答:
创建一个控制开关,每次点击后FALSE,请求完成 变为TRUE,如此往复