防止连续点击提交按钮,重复往数据库插入相同记录,在前端发请求之前拦截。

新建一个js文件
clickThrottle.js
/* 防止重复点击 */
let clickTimer = 0

function clickThrottle() {
  var interval = 3000;//3秒钟之内重复点击只算一次点击
  let now = +new Date(); // 获取当前时间的时间戳
  let timer = clickTimer; // 记录触发事件的事件戳

  if (now - timer < interval) {
    // 如果当前时间 - 触发事件时的事件 < interVal,那么不符合条件,直接return false,
    // 不让当前事件继续执行下去
    return false;
  } else {
    // 反之,记录符合条件触发了事件的时间戳,并 return true,使事件继续往下执行
    clickTimer = now;
    return true;
  }
}

在需要的地方进行调用:

if(!clickThrottle()) return;

控制逻辑就是在3秒钟之内多次点击,只有一次有效。这里的时间根据实际情况进行调整即可。

----------------------------------------------------------分割线---------------------------------------------------------

下面记录另外一种实现方法:

 

在点击事件对应的js方法中获取到当前点击元素

在发送ajax请求前将点击的元素(按钮)置为不可用状态

在请求完成后,将点击元素(按钮)状态置为可用

完成代码示例

function submitSupEditPage () {
        var _this = this;

         $.ajax({
                type: "post",
                url: url,
                cache: false,
                async: false,
                data: $("#WSFrom").serialize(),
                beforeSend:function(){
                    $(_this).prop('disabled',true);
                },
                success: function (data) {
                   //to do
                },
                complete:function(){
                    $(_this).prop('disabled',false);
                }
            }); 
    }
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐