點(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)想搜索。

//?需要觸發(fā)的函數(shù)function?debounce(d){????console.log("聯(lián)想搜索phoneNumber："?+?d)}let?inp?=?document.querySelector("#phone");//?輸入觸發(fā)的事件function?getPhone(fn,delay){????let?timer;????//?使用閉包，保證每次使用的定時器是同一個????return?(d)=>{????????clearTimeout(timer);????????timer?=?setTimeout(()=>{????????????fn(d);????????????//?結(jié)束之后清除定時器????????????clearTimeout(timer);????????},delay)????}}let?getPhoneDebounce?=?getPhone(debounce,1000);inp.addEventListener('keyup',(e)=>{????getPhoneDebounce(e.target.value);})

這時候看輸出：

是的只輸出了一次號碼，也就是說不用每次輸入都進(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ù)射擊。

射擊function?shot(){????console.log('射擊')}let?btn?=?document.querySelector('#shot');function?nextShot(fn,delay){????let?timer;????//?閉包原理同上????return?()=>{????????//?定時器存在，無法射擊????????if(timer){????????????console.log('禁止射擊');????????}else{??//?定時器不存在，射擊，并設(shè)置定時器????????????fn();????????????timer?=?setTimeout(()=>{????????????????//?定時器結(jié)束，可以射擊????????????????clearTimeout(timer);????????????????timer?=?null;????????????},delay)????????}????}}let?start?=?nextShot(shot,20);btn.addEventListener('click',()=>{????start();})

當(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)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。