如何防止用户在ajax请求没有成功之前，点击按钮再次调用ajax？

Question

假设我现在有几个用 li 标签做的按钮，还有时间控件和下拉框。li 的点击操作、时间控件的选择时间操作、下拉框的change事件都用调用同一个ajax。请问，如何在用户做某一种操作调用ajax请求成功之前，阻止用户再次点击其它标签进行ajax请求操作？

Answer 1

例子如下，第一种是拦截重复请求，第二种每次请求都接受同时丢弃旧请求。

如果是拦截重复请求，通常还要给按钮加上 disabled 状态切换。

<script>

// 方法一，通过加载状态判断

// 默认值
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!');
    });
}

</script>

Answer 2

你可以给把那些标签归个类，额外添加两个属性，一个类似组的标志，比如可以添加一个空属性的class属性用于组名，再一个类似开关的标志，比如处于请求的标签多了on的属性，当要发生请求的时候，看组内有没有on属性开关处于开的状态即可，此种实行只要基于jquery的contains选择器就可以。

Answer 3

用一个变量充当开关，每次发起 ajax 之后开关关闭，ajax 请求成功之后，再将变量恢复初始值

Answer 4

通过一个布尔值控制,true就是可以请求，false就是不可以请求，点击后为false，ajax请求成功为true

Answer 5

创建一个控制开关，每次点击后FALSE，请求完成 变为TRUE，如此往复