成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

優(yōu)雅的防止用戶重復(fù)點擊某個按鈕

xuexiangjys / 3369人閱讀

摘要:前言想必前端小伙伴都遇到過一個問題點擊某個按鈕時如果點擊的比較快,可能會觸發(fā)多次。接下來為大家介紹幾種防止重復(fù)點擊的小妙招。這個是網(wǎng)站必備的裝逼特效,既能告訴用戶系統(tǒng)已經(jīng)在幫用戶搞事情了,又可以防止用戶在此期間做其他操作。

前言:想必前端小伙伴都遇到過一個問題:點擊某個按鈕時如果點擊的比較快,可能會觸發(fā)多次。如果查詢操作影響還不大,如果是提交操作,那就會有問題了。接下來為大家介紹幾種防止重復(fù)點擊的小妙招。
基礎(chǔ):給請求添加loading效果。這個是網(wǎng)站必備的裝逼特效,既能告訴用戶系統(tǒng)已經(jīng)在幫用戶搞事情了,又可以防止用戶在此期間做其他操作。
進階(方法1): 使用防抖。 

防抖: 在一定時間內(nèi),動作只會執(zhí)行一次(大家可以使用loadsh的debounce方法,也可以自己寫)。舉個例子:我在網(wǎng)上買了很多東西,今天很多快遞都會到,時不時的就會有快遞小哥的電話,我不想來回去取快遞,就每隔1個小時取一次,如果1個小時內(nèi)沒有快遞,就不下樓拿快遞了。

建議:第一次點擊立即執(zhí)行,后面的點擊每隔一段時間執(zhí)行一次。(debounce的leading設(shè)置為true)

進階(方法2):變量控制。 如果按鈕和事件處理在一個組件中,那么我們可以使用變量來控制,以react為例:

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

如果您還有其他比較好的方法,歡迎留言。

過幾天會寫防抖的文章,歡迎關(guān)注。

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/105070.html

相關(guān)文章

  • Android優(yōu)雅地處理按鈕重復(fù)點擊

    摘要:利用處理重復(fù)點擊響應(yīng)式地處理按鈕點擊,利用的操作符,來防止重復(fù)點擊,相較于第方案來說,此方法更為優(yōu)雅一些。 版權(quán)聲明:本文已授權(quán)微信公眾號:Android必修課,轉(zhuǎn)載請申明出處 App中,有很大一部分場景是點擊按鈕,向服務(wù)端提交數(shù)據(jù),由于網(wǎng)絡(luò)請求需要時間,用戶很可能會多次點擊,造成數(shù)據(jù)重復(fù)提交,造成各種莫名其妙的問題。因此,防止按鈕多次點擊,是Android開發(fā)中一個很重要的技術(shù)手...

    zero 評論0 收藏0
  • 前端干貨之JS最佳實踐

    摘要:避免與進行比較避免推薦與進行比較的代碼,可以用以下技術(shù)進行替換如果值是一個應(yīng)用類型,使用操作符,檢查其構(gòu)造函數(shù)如果值是基本類型,使用檢查其類型如果是希望對象包含某個特定的方法名,則只用操作符確保指定名字的方法存在于對象上。 持續(xù)更新地址 https://wdd.js.org/js-best-pr... 1. 風(fēng)格 一千個讀者有一千個哈姆雷特,每個人都有自己的code style。...

    Aceyclee 評論0 收藏0

發(fā)表評論

0條評論

xuexiangjys

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<