各位朋友你們好呀。今天是立春，明天就是正月十五元宵節(jié)了，這種立春 + 元宵相隔的時(shí)候，可是很難遇到的，百年中就只有幾次。在這提前祝大家元宵快樂(lè)。
今天給大家?guī)?lái)的是Vue 3 中的極致防抖/節(jié)流（含常見(jiàn)方式防抖/節(jié)流）這篇文章，文章中不僅會(huì)講述原來(lái)使用的防抖或節(jié)流方式，還會(huì)帶來(lái)新的一種封裝方式，使用起來(lái)更簡(jiǎn)單、更清晰。
前言
在前端的開(kāi)發(fā)過(guò)程中，在涉及到與用戶交互的過(guò)程中是基本上都是需要處理的，常規(guī)操作就是在對(duì)應(yīng)位置加上防抖或者節(jié)流。
加上防抖或者節(jié)流的作用：一是為了防止用戶頻繁操作；二是為了節(jié)約一定的服務(wù)器資源，減少資源浪費(fèi)的情況。
防抖或節(jié)流原理
防抖（debounce）
如果用戶多次頻繁操作以最后一次為準(zhǔn)，當(dāng)然也可以以第一次為準(zhǔn)，進(jìn)行數(shù)據(jù)更新或者網(wǎng)絡(luò)資源請(qǐng)求，以消除冗余的操作，或者減少一定的請(qǐng)求資源浪費(fèi)。
示例代碼
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 = null
function throttle (fn, delay = 300) {
if(timer == null){
timer = setTimeout(() => {
fn()
clearTimeout(timer)
timer = null
}, delay);
}
}
使用
throttle(()=> count += 1, 1000)
環(huán)境說(shuō)明
- vue 3
- vite
新封裝
這里我分兩個(gè)模塊來(lái)講述。一個(gè)是防抖；另一個(gè)是節(jié)流。
雖然這兩個(gè)差別不是很大，但還是有區(qū)別的。上車，兄弟們。??????
防抖（debounce）
先看常見(jiàn)封裝內(nèi)容。
常見(jiàn)封裝-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)
常見(jiàn)封裝-2
代碼
let timer = null
function 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 來(lái)實(shí)現(xiàn)我們的新方式。這里我就不具體寫(xiě)了。我直接在每行代碼上面添加注釋。我相信朋友你是能看懂的。??????
代碼
// 從 vue 中引入 customRef 和 ref
import { customRef, ref } from "vue"
// 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）
我們還是一樣，先看常見(jiàn)封裝內(nèi)容。
常見(jiàn)封裝-1
代碼
let timer = null
function throttle (fn, delay = 300) {
if(timer == null){
timer = setTimeout(() => {
fn()
clearTimeout(timer)
timer = null
}, delay);
}
}
使用
const addCount = () => throttle(()=> count.value += 1, 1000)
常見(jiàn)封裝-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">
總結(jié)
以上便是Vue 3 中的極致防抖/節(jié)流（含常見(jiàn)方式防抖/節(jié)流）這篇文章的全部?jī)?nèi)容，如有不足或朋友你有更好的方式或者其他獨(dú)到的見(jiàn)解，歡迎評(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é)流文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-790570.html
我是桃小瑞，公眾號(hào) @ 桃小瑞。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-790570.html
到了這里，關(guān)于Vue 3 中的極致防抖/節(jié)流（含常見(jiàn)方式防抖/節(jié)流）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
