溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“Vue3中的極致防抖或節流怎么使用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Vue3中的極致防抖或節流怎么使用”吧！
在前端的開發過程中，在涉及到與用戶交互的過程中是基本上都是需要處理的，常規操作就是在對應位置加上防抖或者節流。
加上防抖或者節流的作用：一是為了防止用戶頻繁操作；二是為了節約一定的服務器資源，減少資源浪費的情況。
防抖（debounce）
如果用戶多次頻繁操作以最后一次為準，當然也可以以第一次為準，進行數據更新或者網絡資源請求，以消除冗余的操作，或者減少一定的請求資源浪費。
示例代碼
function debounce (fn, delay = 300){
let timer = null
return function (...args) {
clearTimeout(timer)
timer = setTimeout(()=>{
fn.call(this, ...args)
}, delay);
}
}
使用
debounce(()=> count += 1, 1000)
節流（throttle ）
在一定時間范圍內，用戶觸發多次只會執行一次以達到防止用戶頻繁操作的目的。
示例代碼
let timer = null
function throttle (fn, delay = 300) {
if(timer == null){
timer = setTimeout(() => {
fn()
clearTimeout(timer)
timer = null
}, delay);
}
}
使用
throttle(()=> count += 1, 1000)
vue 3
vite
這里我分兩個模塊來講述。一個是防抖；另一個是節流。
雖然這兩個差別不是很大，但還是有區別的。上車，兄弟們。
防抖（debounce）
先看常見封裝內容。
常見封裝-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 來實現我們的新方式。這里我就不具體寫了。我直接在每行代碼上面添加注釋。我相信朋友你是能看懂的。
代碼
// 從 vue 中引入 customRef 和 ref
import { customRef, ref } from "vue"
// data 為創建時的數據
// delay 為防抖時間
function debounceRef (data, delay = 300){
// 創建定時器
let timer = null;
// 對 delay 進行判斷，如果傳遞的是 null 則不需要使用 防抖方案，直接返回使用 ref 創建的。
return delay == null
?
// 返回 ref 創建的
ref(data)
:
// customRef 中會返回兩個函數參數。一個是：track 在獲取數據時收集依賴的；一個是：trigger 在修改數據時進行通知派發更新的。
customRef((track, trigger) => {
return {
get () {
// 收集依賴
track()
// 返回當前數據的值
return data
},
set (value) {
// 清除定時器
if(timer != null){
clearTimeout(timer)
timer = null
}
// 創建定時器
timer = setTimeout(() => {
// 修改數據
data = value;
// 派發更新
trigger()
}, delay)
}
}
})
}
使用
// 創建
const count = debounceRef(0, 300)
// 函數中使用
const addCount = () => {
count.value += 1
}
// v-model 中使用
<input type="text" v-model="count">
節流（throttle）
我們還是一樣，先看常見封裝內容。
常見封裝-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)
新封裝
節流和防抖在封裝和使用上大同小異。
代碼
// data 為創建時的數據
// delay 為節流時間
function throttleRef (data, delay = 300){
// 創建定時器
let timer = null;
// 對 delay 進行判斷，如果傳遞的是 null 則不需要使用 節流方案，直接返回使用 ref 創建的。
return delay == null
?
// 返回 ref 創建的
ref(data)
:
// customRef 中會返回兩個函數參數。一個是：track 在獲取數據時收集依賴的；一個是：trigger 在修改數據時進行通知派發更新的。
customRef((track, trigger) => {
return {
get () {
// 收集依賴
track()
// 返回當前數據的值
return data
},
set (value) {
// 判斷
if(timer == null){
// 創建定時器
timer = setTimeout(() => {
// 修改數據
data = value;
// 派發更新
trigger()
// 清除定時器
clearTimeout(timer)
timer = null
}, delay)
}
}
}
})
}
使用
// 創建
const count = debounceRef(0, 300)
// 函數中使用
const addCount = () => {
count.value += 1
}
// v-model 中使用
<input type="text" v-model="count">
感謝各位的閱讀，以上就是“Vue3中的極致防抖或節流怎么使用”的內容了，經過本文的學習后，相信大家對Vue3中的極致防抖或節流怎么使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
