uniapp 输入框防抖节流_拉动一下控制台大小,后台请求数量爆炸,竟是没做好防抖与节流...
點(diǎn)擊上方?Java編程技術(shù)樂園,輕松關(guān)注!及時獲取有趣有料的技術(shù)文章
文章很好,耐心閱讀,記得點(diǎn)贊和關(guān)注哦~
前言
最近有個朋友在面試過程中遇到一個問題:什么是防抖和節(jié)流?糟了,這可觸碰到我的知識盲區(qū)了,好像聽也沒聽過這 2 個東西,痛定思痛,趕緊學(xué)習(xí)學(xué)習(xí)。
防抖(debounce)
在事件被觸發(fā) n 秒之后執(zhí)行,如果在此期間再次觸發(fā)事件,則重新開始計時。
乍一看,這不是閑的蛋疼嗎?為啥要等 n 秒之后再執(zhí)行呢?
本著存在即合理的原則,咱看不懂但咱得去學(xué)啊!經(jīng)過十秒鐘的思考,突然想起來之前做過的公司的一個小程序,使用的 mpvue+vant-weapp,van-field 標(biāo)簽并沒有和數(shù)據(jù)進(jìn)行雙向綁定,而是每次都要觸發(fā) @input 事件,從而完成數(shù)據(jù)綁定:
這就導(dǎo)致了一個問題:
輸一個手機(jī)號要觸發(fā) 11 次事件!!如果是聯(lián)想搜索的話。。。那畫面太美!
我們先自己想一下辦法來解決這個問題。
- 首先我們需要在手機(jī)號輸入完成之后將數(shù)據(jù)綁定到 phoneNumber 上然后進(jìn)行聯(lián)想搜索,怎么算輸入完成呢,輸入一個數(shù)字到找到下一個數(shù)字輸入大概需要 1 不到秒,只要用戶一秒內(nèi)沒有再次輸入,則將輸入框內(nèi)容與 phoneNumber 綁定并進(jìn)行聯(lián)想搜索(什么?你說你輸入五個字符就停下?不怕后臺砍死你)。
- 準(zhǔn)備工具:一個需要觸發(fā)的函數(shù) debounce、一個定時器、一個輸入框、一個判斷是否輸入完成的函數(shù) getPhone。
- 基本思路:輸入綁定事件 getPhone,輸入之后開啟1秒定時器,如果在 1 秒內(nèi)再次進(jìn)行了輸入,則清除之前的定時器,并且重新設(shè)置定時器;如果 1 秒內(nèi)沒有輸入,則輸入結(jié)束觸發(fā)事件 a,進(jìn)行聯(lián)想搜索。
這時候看輸出:
是的只輸出了一次號碼,也就是說不用每次輸入都進(jìn)行一次搜索了。
節(jié)流(throttle)
如果持續(xù)觸發(fā)一個事件,則在一定的時間內(nèi)只執(zhí)行一次事件。
那么問題來了,既然是持續(xù)觸發(fā)了,那為啥還要設(shè)定一定時間內(nèi)只執(zhí)行一次呢?廢話,你吃雞為啥不用 AKM 非要去追夢搶狗雜呢?還不是因?yàn)?AKM 射速慢(狗雜真香)!
我們來試著做一個 AKM 的設(shè)計模擬:
- 首先第一次點(diǎn)擊射擊的時候,打出一發(fā)子彈,當(dāng)以極短的時間再次點(diǎn)擊射擊的時候,由于需要‘冷卻’——也就是節(jié)流,再次點(diǎn)擊無效,當(dāng)冷卻時間過了之后,再次點(diǎn)擊射擊,則繼續(xù)下一次射擊。
- 準(zhǔn)備工具:一個射擊的函數(shù) shot,一個判斷射擊間隔是否結(jié)束的函數(shù) nextShot,一個觸發(fā)射擊的按鈕,判斷射擊是否結(jié)束的定時器 timer。
- 基本思路:第一次點(diǎn)擊按鈕的時候,觸發(fā) shot,當(dāng)繼續(xù)點(diǎn)擊的時候,射擊無效,只有過了定時器設(shè)置的時間才可以繼續(xù)射擊。
當(dāng)我們瘋狂點(diǎn)擊按鈕的時候:
可能這個例子不是很突出,我再說個類似的,英雄聯(lián)盟和DNF的技能冷卻應(yīng)該更適合~
是時候回歸一下標(biāo)題了,免得有人說我可以去 UC 震驚部了!公司的大數(shù)據(jù)組件目前是只要頁面大小發(fā)生變化就會重新加載,這就導(dǎo)致了有時候拉一下控制臺會發(fā)生很多次請求,這個時候就可以用防抖來解決一下了~
作者:.Ping
鏈接:https://juejin.im/post/5e0d7ab9f265da5d691035b5
來源:掘金
總結(jié)
以上是生活随笔為你收集整理的uniapp 输入框防抖节流_拉动一下控制台大小,后台请求数量爆炸,竟是没做好防抖与节流...的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: python 异常回溯_关于python
- 下一篇: 如何提高go代码覆盖率_如何通过静态分析