Vue3中的極致防抖/節(jié)流詳解(附常見(jiàn)方式防抖/節(jié)流)

更新時(shí)間：2023年02月06日 11:15:29 作者：桃小瑞

在JavaScript中函數(shù)的防抖和節(jié)流不是什么新鮮話題,這篇文章主要給大家介紹了關(guān)于Vue3中極致防抖/節(jié)流的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

今天給大家?guī)?lái)的是Vue 3 中的極致防抖/節(jié)流（含常見(jiàn)方式防抖/節(jié)流）這篇文章，文章中不僅會(huì)講述原來(lái)使用的防抖或節(jié)流方式，還會(huì)帶來(lái)新的一種封裝方式，使用起來(lái)更簡(jiǎn)單、更清晰。

在前端的開(kāi)發(fā)過(guò)程中，在涉及到與用戶(hù)交互的過(guò)程中是基本上都是需要處理的，常規(guī)操作就是在對(duì)應(yīng)位置加上防抖或者節(jié)流。

加上防抖或者節(jié)流的作用：一是為了防止用戶(hù)頻繁操作；二是為了節(jié)約一定的服務(wù)器資源，減少資源浪費(fèi)的情況。

防抖或節(jié)流原理

防抖（debounce）

如果用戶(hù)多次頻繁操作以最后一次為準(zhǔn)，當(dāng)然也可以以第一次為準(zhǔn)，進(jìn)行數(shù)據(jù)更新或者網(wǎng)絡(luò)資源請(qǐng)求，以消除冗余的操作，或者減少一定的請(qǐng)求資源浪費(fèi)。

示例代碼

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 ）

在一定時(shí)間范圍內(nèi)，用戶(hù)觸發(fā)多次只會(huì)執(zhí)行一次以達(dá)到防止用戶(hù)頻繁操作的目的。

示例代碼

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)境說(shuō)明

vue 3
vite

新封裝

這里我分兩個(gè)模塊來(lái)講述。一個(gè)是防抖；另一個(gè)是節(jié)流。

雖然這兩個(gè)差別不是很大，但還是有區(qū)別的。上車(chē)，兄弟們。??????

防抖（debounce）

先看常見(jiàn)封裝內(nèi)容。

常見(jiàn)封裝-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)

常見(jiàn)封裝-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 來(lái)實(shí)現(xiàn)我們的新方式。這里我就不具體寫(xiě)了。我直接在每行代碼上面添加注釋。我相信朋友你是能看懂的。??????

代碼

// 從 vue 中引入 customRef 和 ref
import { customRef, ref } from "vue"

// data 為創(chuàng)建時(shí)的數(shù)據(jù)
// delay 為防抖時(shí)間
function debounceRef (data, delay = 300){
    // 創(chuàng)建定時(shí)器
    let timer = null;
    // 對(duì) delay 進(jìn)行判斷，如果傳遞的是 null 則不需要使用 防抖方案，直接返回使用 ref 創(chuàng)建的。
    return delay == null 
        ? 
        // 返回 ref 創(chuàng)建的
        ref(data)
        : 
        // customRef 中會(huì)返回兩個(gè)函數(shù)參數(shù)。一個(gè)是：track 在獲取數(shù)據(jù)時(shí)收集依賴(lài)的；一個(gè)是：trigger 在修改數(shù)據(jù)時(shí)進(jìn)行通知派發(fā)更新的。
        customRef((track, trigger) => {
            return {
                get () {
                    // 收集依賴(lài)
                    track()
                    // 返回當(dāng)前數(shù)據(jù)的值
                    return data
                },
                set (value) {
                    // 清除定時(shí)器
                    if(timer != null){
                        clearTimeout(timer)
                        timer = null
                    }
                    // 創(chuàng)建定時(shí)器
                    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）

我們還是一樣，先看常見(jiàn)封裝內(nèi)容。

常見(jiàn)封裝-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)

常見(jiàn)封裝-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í)的數(shù)據(jù)
// delay 為節(jié)流時(shí)間
function throttleRef (data, delay = 300){
    // 創(chuàng)建定時(shí)器
    let timer = null;
    // 對(duì) delay 進(jìn)行判斷，如果傳遞的是 null 則不需要使用 節(jié)流方案，直接返回使用 ref 創(chuàng)建的。
    return delay == null 
        ? 
        // 返回 ref 創(chuàng)建的
        ref(data)
        : 
        // customRef 中會(huì)返回兩個(gè)函數(shù)參數(shù)。一個(gè)是：track 在獲取數(shù)據(jù)時(shí)收集依賴(lài)的；一個(gè)是：trigger 在修改數(shù)據(jù)時(shí)進(jìn)行通知派發(fā)更新的。
        customRef((track, trigger) => {
            return {
                get () {
                    // 收集依賴(lài)
                    track()
                    // 返回當(dāng)前數(shù)據(jù)的值
                    return data
                },
                set (value) {
                    // 清除定時(shí)器
                    if(timer != null){
                        clearTimeout(timer)
                        timer = null
                    }
                    // 創(chuàng)建定時(shí)器
                    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">