這篇文章帶給大家的是Vue 3 中的極致防手震/節流（含常見方式防手震/節流）這篇文章，文章中不僅會講述原來使用的防手震或節流方式，也會帶來新的一種封裝方式，使用起來更簡單、更清晰。
在前端的開發過程中，在涉及與使用者互動的過程中基本上都是需要處理的，常規操作就是在對應位置加上防手震或者節流。
加上防手震或節流的作用：一是為了防止使用者頻繁操作；二是為了節省一定的伺服器資源，減少資源浪費的情況。
#防手震（debounce）
vuejs影片教學、web前端開發
】#範例程式碼
##
function debounce (fn, delay = 300){
let timer = null
return function (...args) {
clearTimeout(timer)
timer = setTimeout(()=>{
fn.call(this, ...args)
}, delay);
}
}##使用debounce(()=> count += 1, 1000)
登入後複製
在一定時間範圍內，用戶觸發多次只會執行一次以達到防止用戶頻繁操作的目的。
範例程式碼
let timer = null
function throttle (fn, delay = 300) {
if(timer == null){
timer = setTimeout(() => {
fn()
clearTimeout(timer)
timer = null
}, delay);
}
}throttle(()=> count += 1, 1000)
雖然這兩個差異不是很大，但還是有差別的。上車，兄弟們。 防手震（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)
登入後複製
#程式碼
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 中的
來實作我們的新方式。這裡我就不具體寫了。我直接在每行程式碼上面添加註解。我相信朋友你是能看懂的。
程式碼
// 从 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)
}
}
})
}使用#「節流（throttle）// 创建
const count = debounceRef(0, 300)
// 函数中使用
const addCount = () => {
count.value += 1
}
// v-model 中使用
<input type="text" v-model="count">登入後複製登入後複製
我們還是一樣，先看常見封裝內容。
常見封裝-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)
登入後複製
#程式碼
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">以上便是
Vue 3 中的極致防抖/節流（含常見方式防手震/節流）
當然朋友你又學到了一招可以按讚 追蹤 評論哦。
希望這篇文章對正在閱讀的朋友你有幫助。 想了解vue 2中如何實作相同方案的朋友可以點擊這裡?
#（學習影片分享：vuejs入門教學、
程式設計基礎影片###）###以上是深入淺析Vue3中的極致防手震/節流的詳細內容。更多資訊請關注PHP中文網其他相關文章！
