jquery ajax避免重复触发同一个事件

原创
2015/12/09 14:54
阅读数 282

拿个我最近在做的功能举例:

    关注他人的功能:有一个关注按钮,实现关注与取消关注功能。(数据库是mysql)

    由于是ajax操作,有个回调方法,在返回success之前或者浏览器卡顿之间会出现重复触发同一个事件。


方法1:

    最笨的方法就是在关联表中插入数据前先查询 ,然后判断有没有两人的关联数据。若没有则插入,若有则不插入。此方法,当表单数据量多的时候,操作不仅慢,还会给服务器带来一定压力。

方法2:

    setTimeout + clearTimeout

连续的点击会把上一次点击清除掉,也就是ajax请求会在最后一次点击后发出去

方法3:

button有一个属性是disabled,可以控制其是否可以点击,代码如下:

<input type="button" value="Click" id="subBtn"/>
<script type="text/javascript">
function myFunc(){
    //code
    //执行某段代码后可选择移除disabled属性,让button可以再次被点击
    $("#subBtn").removeAttr("disabled");
}
$("#subBtn").click(function(){
    //让button无法再次点击
    $(this).attr("disabled","disabled");
    //执行其它代码,比如提交事件等
    myFunc();
});
</script>

方法4:

    给ajax请求一个"开关",效果等同于方法3。代码如下:

var flag = false //定义一个开关,默认是关

$("#subBtn").click(function(){
    if(!flag){
        flag = true; //打开开关
        //若开关处于开的状态,执行其它代码,比如提交事件等
        flag = false; //执行完代码,需要在回调函数的最后将开关关闭 
    }
});


    以上方法2,3比较常用。看到知乎上的大神说,可以自己写封装的ajax,内嵌一些机制,暂时还未理解,等理解了再完善一下。

展开阅读全文
打赏
1
4 收藏
分享
加载中
更多评论
打赏
0 评论
4 收藏
1
分享
返回顶部
顶部