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

2019独角兽企业重金招聘Python工程师标准>>>

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

    关注他人的功能：有一个关注按钮，实现关注与取消关注功能。(数据库是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，内嵌一些机制，暂时还未理解，等理解了再完善一下。

转载于:https://my.oschina.net/wjj328938669/blog/541489