前端防止重复提交

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

新建一个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);
                }
            }); 
    }