優雅的防止用戶重複點擊某個按鈕

前言：想必前端小夥伴都遇到過一個問題：點擊某個按鈕時若是點擊的比較快，可能會觸發屢次。若是查詢操做影響還不大，若是是提交操做，那就會有問題了。接下來爲你們介紹幾種防止重複點擊的小妙招。

基礎：給請求添加loading效果。這個是網站必備的裝逼特效，既能告訴用戶系統已經在幫用戶搞事情了，又能夠防止用戶在此期間作其餘操做。

進階(方法1)： 使用防抖。

防抖: 在必定時間內，動做只會執行一次（你們能夠使用loadsh的debounce方法，也能夠本身寫）。舉個例子：我在網上買了不少東西，今天不少快遞都會到，時不時的就會有快遞小哥的電話，我不想來回去取快遞，就每隔1個小時取一次，若是1個小時內沒有快遞，就不下樓拿快遞了。

建議：第一次點擊當即執行，後面的點擊每隔一段時間執行一次。（debounce的leading設置爲true）

進階（方法2）：變量控制。 若是按鈕和事件處理在一個組件中，那麼咱們能夠使用變量來控制，以react爲例：

建議使用防抖的方式，寫法簡單，可維護性高。

若是您還有其餘比較好的方法，歡迎留言。

過幾天會寫防抖的文章，歡迎關注。