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