怎么让当前点击元素不重复发送请求

像这种每次点击切换都要进行Ajax请求，怎么让当前选项进来时请求一次，如果再点击就不发送请求，这个该怎么设置呢

可以用 one 绑定事件这样就只会触发一次了

$("#youButton").on("click", (() => {
    // 在闭包中定义一个变量记录点击的状态
    var isClicked = false;

    // 外层函数（箭头函数）是个立即执行函数
    // 这个才是返回出去绑定给 click 的
    return function() {
        // 如果已经点击，退出
        if (isClicked) {
            return;
        }

        // 记录点击状态
        isClicked = true;
        $.ajax(url, data).done(result => {
            // 调用成功，做正确的事情
        }).fail(error => {
            // 凋用失败，一般在这里报错
        }).always(() => {
            // ajax 返回之后将状态改回未点击
            isClicked = false;
        });
    };
})());

假设你在使用jQuery，你可以这样：

$('.menu').on('click', 'li', function () {
    if($(this).is('.active')){
        return false;
    } else {
        //ajax请求
    }
})

假设ajax要获取数据data，默认情况下data是undefined，一次请求过后data赋值，再次点击先判断data再决定是否请求。

简单的方式就是设置一个变量比如 a = 0;
$('.menu').on('click', 'li', function () {
if(a==0){

  a=1;
   //ajax请求
   ajax请求成功 a=0

}

我是常用两个方法：

每次在第一次点击之后，我就在在ajax发送前取消这个点击事件的绑定，等ajax结束后再恢复绑定。或者做一个block全局变量来做检测。
或
点击之后直接做一个大遮罩层把整个页面都挡住。不过这种方法根据场景来看用户体验不一定好

【热门文章】