當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

uniapp 输入框防抖节流_拉动一下控制台大小，后台请求数量爆炸，竟是没做好防抖与节流...

發布時間：2025/3/15 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 uniapp 输入框防抖节流_拉动一下控制台大小，后台请求数量爆炸，竟是没做好防抖与节流... 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

點擊上方?Java編程技術樂園，輕松關注！及時獲取有趣有料的技術文章

文章很好，耐心閱讀，記得點贊和關注哦~

前言

最近有個朋友在面試過程中遇到一個問題：什么是防抖和節流？糟了，這可觸碰到我的知識盲區了，好像聽也沒聽過這 2 個東西，痛定思痛，趕緊學習學習。

防抖(debounce)

在事件被觸發 n 秒之后執行，如果在此期間再次觸發事件，則重新開始計時。

乍一看，這不是閑的蛋疼嗎？為啥要等 n 秒之后再執行呢？

本著存在即合理的原則，咱看不懂但咱得去學啊！經過十秒鐘的思考，突然想起來之前做過的公司的一個小程序，使用的 mpvue+vant-weapp，van-field 標簽并沒有和數據進行雙向綁定，而是每次都要觸發 @input 事件，從而完成數據綁定：

這就導致了一個問題：

輸一個手機號要觸發 11 次事件！！如果是聯想搜索的話。。。那畫面太美！

我們先自己想一下辦法來解決這個問題。

首先我們需要在手機號輸入完成之后將數據綁定到 phoneNumber 上然后進行聯想搜索，怎么算輸入完成呢，輸入一個數字到找到下一個數字輸入大概需要 1 不到秒，只要用戶一秒內沒有再次輸入，則將輸入框內容與 phoneNumber 綁定并進行聯想搜索(什么？你說你輸入五個字符就停下？不怕后臺砍死你)。
準備工具：一個需要觸發的函數 debounce、一個定時器、一個輸入框、一個判斷是否輸入完成的函數 getPhone。
基本思路：輸入綁定事件 getPhone，輸入之后開啟1秒定時器，如果在 1 秒內再次進行了輸入，則清除之前的定時器，并且重新設置定時器；如果 1 秒內沒有輸入，則輸入結束觸發事件 a，進行聯想搜索。

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

這時候看輸出：

是的只輸出了一次號碼，也就是說不用每次輸入都進行一次搜索了。

節流(throttle)

如果持續觸發一個事件，則在一定的時間內只執行一次事件。

那么問題來了，既然是持續觸發了，那為啥還要設定一定時間內只執行一次呢？廢話，你吃雞為啥不用 AKM 非要去追夢搶狗雜呢？還不是因為 AKM 射速慢(狗雜真香)！

我們來試著做一個 AKM 的設計模擬：

首先第一次點擊射擊的時候，打出一發子彈，當以極短的時間再次點擊射擊的時候，由于需要‘冷卻’——也就是節流，再次點擊無效，當冷卻時間過了之后，再次點擊射擊，則繼續下一次射擊。
準備工具：一個射擊的函數 shot，一個判斷射擊間隔是否結束的函數 nextShot，一個觸發射擊的按鈕，判斷射擊是否結束的定時器 timer。
基本思路：第一次點擊按鈕的時候，觸發 shot，當繼續點擊的時候，射擊無效，只有過了定時器設置的時間才可以繼續射擊。

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

當我們瘋狂點擊按鈕的時候：

可能這個例子不是很突出，我再說個類似的，英雄聯盟和DNF的技能冷卻應該更適合~