Vue3中的極致防抖/節(jié)流詳解(附常見方式防抖/節(jié)流)
更新時間：2023年02月06日 11:15:29 作者：桃小瑞
在JavaScript中函數(shù)的防抖和節(jié)流不是什么新鮮話題,這篇文章主要給大家介紹了關于Vue3中極致防抖/節(jié)流的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
前言
今天給大家?guī)淼氖荲ue 3 中的極致防抖/節(jié)流（含常見方式防抖/節(jié)流）這篇文章，文章中不僅會講述原來使用的防抖或節(jié)流方式，還會帶來新的一種封裝方式，使用起來更簡單、更清晰。
在前端的開發(fā)過程中，在涉及到與用戶交互的過程中是基本上都是需要處理的，常規(guī)操作就是在對應位置加上防抖或者節(jié)流。
加上防抖或者節(jié)流的作用：一是為了防止用戶頻繁操作；二是為了節(jié)約一定的服務器資源，減少資源浪費的情況。
防抖或節(jié)流原理
防抖（debounce）
如果用戶多次頻繁操作以最后一次為準，當然也可以以第一次為準，進行數(shù)據(jù)更新或者網(wǎng)絡資源請求，以消除冗余的操作，或者減少一定的請求資源浪費。
示例代碼
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">總結
以上便是Vue 3 中的極致防抖/節(jié)流（含常見方式防抖/節(jié)流）這篇文章的全部內(nèi)容
到此這篇關于Vue3中的極致防抖/節(jié)流詳解的文章就介紹到這了,更多相關Vue3極致防抖/節(jié)流內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文主要介紹了在vue中寫jsx的幾種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
vue3封裝AES(CryptoJS)前端加密解密通信代碼實現(xiàn)
防止數(shù)據(jù)被爬取,前后端傳參接收參數(shù)需要加密處理,使用AES加密,這篇文章主要給大家介紹了關于vue3封裝AES(CryptoJS)前端加密解密通信代碼實現(xiàn)的相關資料,需要的朋友可以參考下2023-12-12
最近做項目需要實現(xiàn)世界地圖,本文主要介紹了Vue3+echarts繪制世界地圖的示例代碼,具有一定的參考價值,感謝的可以了解一下2024-03-03
vue項目中如何使用video.js實現(xiàn)視頻播放與視頻進度條打點
這篇文章主要給大家介紹了關于vue項目中如何使用video.js實現(xiàn)視頻播放與視頻進度條打點的相關資料,video.js是一款基于HTML5的網(wǎng)絡視頻播放器,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12
vuex 中輔助函數(shù)mapGetters的基本用法詳解
mapGetters輔助函數(shù)僅僅是將 store 中的 getter 映射到局部計算屬性，在組件或界面中不使用mapGetter調(diào)用映射vuex中的getter，在組件或界面中使用mapGetter調(diào)用映射vuex中的getter，具體內(nèi)容跟隨小編一起通過本文學習吧2021-07-07
淺談VUE防抖與節(jié)流的最佳解決方案(函數(shù)式組件)
這篇文章主要介紹了淺談VUE防抖與節(jié)流的最佳解決方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
這篇文章主要介紹了Vue中比較流行且好用的一些組件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-08-08
Vue.js目前已經(jīng)更新到2.x，功能和語法上有一定升級和修改，本文首先介紹基礎內(nèi)容。感興趣的朋友一起看看吧2017-10-10
這篇文章主要介紹了mpvue 如何使用騰訊視頻插件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
解決element-ui中下拉菜單子選項click事件不觸發(fā)的問題
今天小編就為大家分享一篇解決element-ui中下拉菜單子選項click事件不觸發(fā)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08