深入淺析Vue3中的極致防手震/節流

這篇文章帶給大家的是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)

節流（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">

總結

---

以上便是
Vue 3 中的極致防抖/節流（含常見方式防手震/節流）

這篇文章的全部內容，如有不足或朋友你有更好的方式或其他獨到的見解，歡迎留言私訊。

當然朋友你又學到了一招可以按讚 追蹤 評論哦。

希望這篇文章對正在閱讀的朋友你有幫助。 想了解vue 2中如何實作相同方案的朋友可以點擊這裡?

Vue 2 中的實作CustomRef 方式防手震/節流

#（學習影片分享：vuejs入門教學、

程式設計基礎影片###）###

以上是深入淺析Vue3中的極致防手震/節流的詳細內容。更多資訊請關注PHP中文網其他相關文章！