摘要:前言想必前端小伙伴都遇到過一個問題點擊某個按鈕時如果點擊的比較快,可能會觸發(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
摘要:利用處理重復(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ù)手...
摘要:避免與進行比較避免推薦與進行比較的代碼,可以用以下技術(shù)進行替換如果值是一個應(yīng)用類型,使用操作符,檢查其構(gòu)造函數(shù)如果值是基本類型,使用檢查其類型如果是希望對象包含某個特定的方法名,則只用操作符確保指定名字的方法存在于對象上。 持續(xù)更新地址 https://wdd.js.org/js-best-pr... 1. 風(fēng)格 一千個讀者有一千個哈姆雷特,每個人都有自己的code style。...
閱讀 1139·2021-11-22 14:56
閱讀 1599·2019-08-30 15:55
閱讀 3431·2019-08-30 15:45
閱讀 1699·2019-08-30 13:03
閱讀 2921·2019-08-29 18:47
閱讀 3387·2019-08-29 11:09
閱讀 2699·2019-08-26 18:36
閱讀 2654·2019-08-26 13:55