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

今天給大家帶來的是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

新封裝

這裡我分兩個模塊來講述。一個是防抖；另一個是節流。

雖然這兩個差別不是很大，但還是有區別的。上車，兄弟們。