javascript - 怎么让当前点击元素不重复发送请求
阿神
阿神 2017-04-11 12:19:06
[JavaScript讨论组]

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

阿神
阿神

闭关修行中......

全部回复(6)
迷茫

假设你在使用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全局变量来做检测。

  • 点击之后直接做一个大遮罩层把整个页面都挡住。不过这种方法根据场景来看用户体验不一定好

伊谢尔伦
$("#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;
        });
    };
})());
高洛峰

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号