国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

優(yōu)雅的防止用戶(hù)重復(fù)點(diǎn)擊某個(gè)按鈕

xuexiangjys / 3326人閱讀

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

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

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

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

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

建議使用防抖的方式,寫(xiě)法簡(jiǎn)單,可維護(hù)性高。

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/105070.html

相關(guān)文章

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

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

    zero 評(píng)論0 收藏0
  • 前端干貨之JS最佳實(shí)踐

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

    Aceyclee 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<