先看看概念

函數防抖(debounce)：

在事件被觸發n秒后再執行回調，如果在這n秒內又被觸發，則重新計時；典型的案例就是輸入搜索：輸入結束后n秒才進行搜索請求，n秒內又輸入的內容，就重新計時。像是兩個人的對話，A在不停的balabala（持續觸發），如果他說話的時候有停頓（一定間隔），但是停頓的時間不夠長，就認為A沒有說完， 當停頓時間超過一某個范圍就認為A說完了，然后B開始回答（響應）。

函數節流(throttle)：

規定在一個單位時間內，只能觸發一次函數，如果這個單位時間內觸發多次函數，只有第一次生效； 典型的案例就是鼠標不斷點擊觸發，規定在n秒內多次點擊只有一次生效。感覺像是去排隊過安檢，當人很多的時候（持續地要進門），安保會隔一段時間放進去幾個進行安檢（一定時間的間隔）。

場景

前提其實都是某個行為持續地觸發，不同之處只要判斷是要 優化到減少它的執行次數(throttle) 還是 只執行一次(debounce) 就行。

?

實現(Vue mixin用法)

//防抖 let _d_timer = null; Vue.prototype.$debounce = (cb, delay) => {let that = this;if (!delay) {delay = 1000;}if (_d_timer) {clearTimeout(_d_timer);}_d_timer = setTimeout(function() {cb();_d_timer = null;}, delay) }//節流 let throttle_canRun=true; Vue.prototype.$throttle=(cb,delay)=>{if(!throttle_canRun) return;if(!delay) delay=500;throttle_canRun=false;setTimeout(function(){throttle_canRun=true;cb();},delay) }

頁面應用

onInput() {this.$debounce(()=>{uni.request({url: "https://vipshop.herokuapp.com/api/v1/product/",data: {name: this.txt},success:(res)=> {console.log(res)}})}); }, throttleHandle(){this.$throttle(function(){console.log(111)}) }

?

轉載于:https://www.cnblogs.com/gitByLegend/p/11565432.html

總結

以上是生活随笔為你收集整理的节流防抖学习与实践的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。