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