記錄 一次 JS防重複提交 實現
阿新 • • 發佈:2019-01-04
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 有很多的時候和我們預期的不一致 把握矛盾點 準確擊破