本篇文章給大家帶來的是Vue 3 中的極致防抖/節流（含常見方式防抖/節流）這篇文章，文章中不僅會講述原來使用的防抖或節流方式，還會帶來新的一種封裝方式，使用起來更簡單、更清晰。
在前端的開發過程中，在涉及到與用戶交互的過程中是基本上都是需要處理的，常規操作就是在對應位置加上防抖或者節流。
【資料圖】
加上防抖或者節流的作用：一是為了防止用戶頻繁操作；二是為了節約一定的服務器資源，減少資源浪費的情況。
防抖（debounce）
如果用戶多次頻繁操作以最后一次為準，當然也可以以第一次為準，進行數據更新或者網絡資源請求，以消除冗余的操作，或者減少一定的請求資源浪費。【相關推薦：vuejs視頻教程、web前端開發】
示例代碼
function debounce (fn, delay = 300){ let timer = null return function (...args) { clearTimeout(timer) timer = setTimeout(()=>{ fn.call(this, ...args) }, delay); }}使用
debounce(()=> count += 1, 1000)
節流（throttle ）
在一定時間范圍內，用戶觸發多次只會執行一次以達到防止用戶頻繁操作的目的。
示例代碼
let timer = nullfunction throttle (fn, delay = 300) { if(timer == null){ timer = setTimeout(() => { fn() clearTimeout(timer) timer = null }, delay); }}使用
throttle(()=> count += 1, 1000)
vue 3
vite這里我分兩個模塊來講述。一個是防抖；另一個是節流。
雖然這兩個差別不是很大，但還是有區別的。上車，兄弟們。
防抖（debounce）
先看常見封裝內容。
常見封裝-1
代碼
function debounce (fn, delay = 300){ let timer = null return function (...args) { if(timer != null){ clearTimeout(timer) timer = null } timer = setTimeout(()=>{ fn.call(this, ...args) }, delay); }}使用
const addCount = debounce(()=> count.value += 1, 1000)
常見封裝-2
代碼
let timer = nullfunction debounce (fn, delay = 1000){ if(timer != null){ clearTimeout(timer) timer = null } timer = setTimeout(fn, delay)}使用
const addCount = () => debounce(()=> count.value += 1, 1000)
新封裝
這里我們需要借助 vue 3中的 customRef來實現我們的新方式。這里我就不具體寫了。我直接在每行代碼上面添加注釋。我相信朋友你是能看懂的。
代碼
// 從 vue 中引入 customRef 和 refimport { customRef, ref } from "vue"http:// data 為創建時的數據// delay 為防抖時間function debounceRef (data, delay = 300){ // 創建定時器 let timer = null; // 對 delay 進行判斷，如果傳遞的是 null 則不需要使用 防抖方案，直接返回使用 ref 創建的。 return delay == null ? // 返回 ref 創建的 ref(data) : // customRef 中會返回兩個函數參數。一個是：track 在獲取數據時收集依賴的；一個是：trigger 在修改數據時進行通知派發更新的。 customRef((track, trigger) => { return { get () { // 收集依賴 track() // 返回當前數據的值 return data }, set (value) { // 清除定時器 if(timer != null){ clearTimeout(timer) timer = null } // 創建定時器 timer = setTimeout(() => { // 修改數據 data = value; // 派發更新 trigger() }, delay) } } })}使用
// 創建const count = debounceRef(0, 300)// 函數中使用const addCount = () => { count.value += 1}// v-model 中使用<input type="text" v-model="count">節流（throttle）
我們還是一樣，先看常見封裝內容。
常見封裝-1
代碼
let timer = nullfunction throttle (fn, delay = 300) { if(timer == null){ timer = setTimeout(() => { fn() clearTimeout(timer) timer = null }, delay); }}使用
const addCount = () => throttle(()=> count.value += 1, 1000)
常見封裝-2
代碼
function throttle (fn, delay = 300) { let timer = null return function (...args) { if(timer == null){ timer = setTimeout(() => { fn.call(this, ...args) clearTimeout(timer) timer = null }, delay); } }}使用
const addCount = throttle(()=> count.value += 1, 1000)
新封裝
節流和防抖在封裝和使用上大同小異。
代碼
// data 為創建時的數據// delay 為節流時間function throttleRef (data, delay = 300){ // 創建定時器 let timer = null; // 對 delay 進行判斷，如果傳遞的是 null 則不需要使用 節流方案，直接返回使用 ref 創建的。 return delay == null ? // 返回 ref 創建的 ref(data) : // customRef 中會返回兩個函數參數。一個是：track 在獲取數據時收集依賴的；一個是：trigger 在修改數據時進行通知派發更新的。 customRef((track, trigger) => { return { get () { // 收集依賴 track() // 返回當前數據的值 return data }, set (value) { // 判斷 if(timer == null){ // 創建定時器 timer = setTimeout(() => { // 修改數據 data = value; // 派發更新 trigger() // 清除定時器 clearTimeout(timer) timer = null }, delay) } } } })}使用
// 創建const count = debounceRef(0, 300)// 函數中使用const addCount = () => { count.value += 1}// v-model 中使用<input type="text" v-model="count">以上便是Vue 3 中的極致防抖/節流（含常見方式防抖/節流）這篇文章的全部內容，如有不足或朋友你有更好的方式或者其他獨到的見解，歡迎評論 + 私信。
當然朋友你又學到了一招可以點贊 + 關注 + 評論哦。
希望本篇文章對正在閱讀的朋友你有所幫助。
想了解vue 2中如何實現相同方案的朋友可以點擊這里 ? Vue 2 中的實現 CustomRef 方式防抖/節流
（學習視頻分享：vuejs入門教程、編程基礎視頻）
以上就是深入淺析Vue3中的極致防抖/節流的詳細內容，更多請關注php中文網其它相關文章！
關鍵詞： JavaScript Vue.js
營業執照公示信息