jquery ajax避免重复触发同一个事件
jquery ajax避免重复触发同一个事件
mosaic101 发表于2年前
jquery ajax避免重复触发同一个事件
  • 发表于 2年前
  • 阅读 119
  • 收藏 4
  • 点赞 1
  • 评论 0

【腾讯云】如何购买服务器最划算?>>>   

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

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

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

共有 人打赏支持
粉丝 16
博文 31
码字总数 12966
×
mosaic101
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: