這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

今天給大家帶來的是Vue 3 中的極致防抖/節流（含常見方式防抖/節流）這篇文章，文章中不僅會講述原來使用的防抖或節流方式，還會帶來新的一種封裝方式，使用起來更簡單、更清晰，

前言

在前端的開發程序中，在涉及到與用戶互動的程序中是基本上都是需要處理的，常規操作就是在對應位置加上防抖或者節流，

加上防抖或者節流的作用：一是為了防止用戶頻繁操作；二是為了節約一定的服務器資源，減少資源浪費的情況，

防抖或節流原理

防抖（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 = https://www.cnblogs.com/smileZAZ/archive/2023/03/27/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 = https://www.cnblogs.com/smileZAZ/archive/2023/03/27/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 中的極致防抖/節流（含常見方式防抖/節流）這篇文章的全部內容，如有不足或朋友你有更好的方式或者其他獨到的見解，歡迎評論 + 私信，

當然朋友你又學到了一招可以點贊 + 關注 + 評論哦，

希望本篇文章對正在閱讀的朋友你有所幫助，

本文轉載于:

https://juejin.cn/post/7196150790368215077

如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，

標籤：其他

上一篇：Microsoft Flow | 微信 | LDP 整合開發

下一篇：我為什么推薦Nuxt3