Vue3中的極致防抖/節(jié)流詳解(附常見方式防抖/節(jié)流)
更新時間：2023年02月06日 11:15:29 作者：桃小瑞
在JavaScript中函數(shù)的防抖和節(jié)流不是什么新鮮話題,這篇文章主要給大家介紹了關(guān)于Vue3中極致防抖/節(jié)流的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
前言
今天給大家?guī)淼氖荲ue 3 中的極致防抖/節(jié)流（含常見方式防抖/節(jié)流）這篇文章，文章中不僅會講述原來使用的防抖或節(jié)流方式，還會帶來新的一種封裝方式，使用起來更簡單、更清晰。
在前端的開發(fā)過程中，在涉及到與用戶交互的過程中是基本上都是需要處理的，常規(guī)操作就是在對應(yīng)位置加上防抖或者節(jié)流。
加上防抖或者節(jié)流的作用：一是為了防止用戶頻繁操作；二是為了節(jié)約一定的服務(wù)器資源，減少資源浪費的情況。
防抖或節(jié)流原理
防抖（debounce）
如果用戶多次頻繁操作以最后一次為準，當然也可以以第一次為準，進行數(shù)據(jù)更新或者網(wǎng)絡(luò)資源請求，以消除冗余的操作，或者減少一定的請求資源浪費。
示例代碼
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 = null
function throttle (fn, delay = 300) {
if(timer == null){
timer = setTimeout(() => {
fn()
clearTimeout(timer)
timer = null
}, delay);
}
}使用
throttle(()=> count += 1, 1000)
環(huán)境說明
- 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 = 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 來實現(xiàn)我們的新方式。這里我就不具體寫了。我直接在每行代碼上面添加注釋。我相信朋友你是能看懂的。??????
代碼
// 從 vue 中引入 customRef 和 ref
import { customRef, ref } from "vue"
// 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 = null
function 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é)流和防抖在封裝和使用上都是一模一樣的，但為了方便閱讀，我還是在下方為各位朋友 copy 了一份????。
代碼
// 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){
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é)
以上便是Vue 3 中的極致防抖/節(jié)流（含常見方式防抖/節(jié)流）這篇文章的全部內(nèi)容
到此這篇關(guān)于Vue3中的極致防抖/節(jié)流詳解的文章就介紹到這了,更多相關(guān)Vue3極致防抖/節(jié)流內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Nuxt封裝@nuxtjs/axios請求后端數(shù)據(jù)方式
這篇文章主要介紹了Nuxt封裝@nuxtjs/axios請求后端數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue+openlayers+nodejs+postgis實現(xiàn)軌跡運動效果
使用postgres（postgis）數(shù)據(jù)庫以及nodejs作為后臺,vue和openlayers做前端,openlayers使用http請求通過nodejs從postgres數(shù)據(jù)庫獲取數(shù)據(jù),這篇文章主要介紹了vue+openlayers+nodejs+postgis實現(xiàn)軌跡運動,需要的朋友可以參考下2024-05-05
基于vue-element組件實現(xiàn)音樂播放器功能
這篇文章主要介紹了基于vue-element組件實現(xiàn)音樂播放器功能，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-05-05
在?Vue3.x?中,組件間的參數(shù)傳遞是構(gòu)建復(fù)雜應(yīng)用時不可或缺的一部分,無論是父子組件還是兄弟組件之間,合理的數(shù)據(jù)流動都是保持應(yīng)用狀態(tài)一致性和可維護性的關(guān)鍵,本文將通過示例代碼,詳細介紹?Vue3.x?中組件間如何傳遞參數(shù),需要的朋友可以參考下2024-03-03
這篇文章主要介紹了Vue3在Setup中使用axios請求獲取的值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue使用lodash進行防抖節(jié)流的實現(xiàn)
本文主要介紹了Vue使用lodash進行防抖節(jié)流的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
對axios進行封裝以及將API接口按業(yè)務(wù)模塊統(tǒng)一管理，有助于我們簡化代碼，方便后期維護。本文介紹了如何用vue封裝axios請求，感興趣的同學，可以參考下。2021-06-06
在本篇文章里小編給大家整理的是關(guān)于Vue+Vuex實現(xiàn)自動登錄的知識點詳解，需要的朋友們可以學習下。2020-03-03
vuejs實現(xiàn)標簽選項卡動態(tài)更改css樣式的方法
這篇文章主要介紹了vuejs實現(xiàn)標簽選項卡-動態(tài)更改css樣式的方法，代碼分為html和js兩部分,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了Vue學習筆記進階篇之vue-cli安裝及介紹，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07