1. 程式人生 > >記錄 一次 JS防重複提交 實現

記錄 一次 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();
   //延遲兩秒恢復
   setTimeout(function () {
      rebackClick(id, func);
   }, 2000)
}

搞定! 

小結:  js 有很多的時候和我們預期的不一致  把握矛盾點 準確擊破