记录 一次 JS防重复提交 实现

1. 起因

线上数据库重复数据

2、解决思路

a.给按钮添加onclick事件

b. 当事件触发时 先移除onclick 属性 执行参数校验及发送请求

c. 恢复onclick事件  因为如果参数校验失败直接return 将不能提交

3. 方法

1. disabled 2 flag 3 onclick

首先disabled 只适用于按钮  我的是div 排除

其次flag 不能防止多次点击 可以多次进入点击函数 排除

 4. 细节

$(id).removeAttr("onclick");
func();
rebackClick(id, func);
本以为这样进来先remove掉 第二次就不能点击了 就可以了 （理想很丰满，现实很骨感） 
后来发现程序太快了 remove 和 reback 很快就执行完了 结果你快速点击时候 还是会触发onclick事件

后来把func ajax 改为同步的还是不行

接着感觉是手速太快 在第一次remove前 就点击了第二次  也不对

最后考虑吧rebackClick延迟执行

function uniqueClick(id, func) {
   $("#" + id).removeAttr("onclick");
   func();
   //延迟1.5秒恢复
   setTimeout(function () {
      $("#" + id).attr("onclick","uniqueClick('"+id+"',"+func+");")
   }, 1500)
}

搞定! 

小结：  js 有很多的时候和我们预期的不一致  把握矛盾点 准确击破