一文教你如何一個Vue指令搞定函數(shù)防抖

更新時間：2024年02月27日 10:26:32 作者：JYeontu

防抖（Debounce）在前端開發(fā)中是一種常用的技術(shù),它的作用是限制某個操作在短時間內(nèi)的頻繁觸發(fā),下面我們就來看看如何一個Vue指令搞定函數(shù)防抖吧

說在前面

防抖（Debounce）在前端開發(fā)中是一種常用的技術(shù)，它的作用是限制某個操作在短時間內(nèi)的頻繁觸發(fā)，只有在一定的間隔時間內(nèi)才執(zhí)行相應(yīng)的操作。

什么是防抖

函數(shù)防抖方法是一個函數(shù)，它的執(zhí)行被延遲了 t 毫秒，如果在這個時間窗口內(nèi)再次調(diào)用它，它的執(zhí)行將被取消。你編寫的防抖函數(shù)也應(yīng)該接收傳遞的參數(shù)。

例如，假設(shè) t = 50ms ，函數(shù)分別在 30ms 、 60ms 和 100ms 時調(diào)用。前兩個函數(shù)調(diào)用將被取消，第三個函數(shù)調(diào)用將在 150ms 執(zhí)行。如果改為 t = 35ms ，則第一個調(diào)用將被取消，第二個調(diào)用將在 95ms 執(zhí)行，第三個調(diào)用將在 135ms 執(zhí)行。

效果展示

實現(xiàn)原理

防抖函數(shù)實現(xiàn)步驟

1、當(dāng)需要執(zhí)行某個操作時，首先設(shè)置一個定時器。
2、如果在規(guī)定的時間間隔內(nèi)再次觸發(fā)了該操作，則清除之前的定時器。
3、重新設(shè)置一個新的定時器，以確保在最后一次觸發(fā)操作后的一段時間內(nèi)不再觸發(fā)操作。
4、最終在最后一次觸發(fā)操作后的時間間隔結(jié)束時執(zhí)行相應(yīng)的操作。

基本的防抖函數(shù)示例

function debounce(func, delay) {
  let timer;

  return function() {
    const context = this;
    const args = arguments;

    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
}

// 創(chuàng)建一個防抖函數(shù)
const debouncedFunction = debounce(() => {
  console.log('Debounced function is executed');
}, 300); // 設(shè)置延遲時間為300毫秒

// 在需要防抖的事件中調(diào)用防抖函數(shù)
window.addEventListener('scroll', debouncedFunction);

這種基礎(chǔ)的寫法應(yīng)該大部分同學(xué)都可以很輕松的寫出來，這里就不過多贅述了，主要看下怎么將其封裝成一個vue指令來使用。

封裝成vue指令

指令代碼

export default {
    inserted: function (el, binding) {
        const arg = binding.arg || 500;
        let timer;
        el.addEventListener("input", (e) => {
            clearTimeout(timer);
            timer = setTimeout(() => {
                binding.value(e);
            }, arg); // 設(shè)置延遲時間，單位為毫秒
        });
    },
};

這段代碼定義了一個自定義指令對象，其中的 inserted 方法會在指令綁定到元素上時被調(diào)用。在這里，我們將該指令綁定到輸入框上。

當(dāng)輸入框觸發(fā)輸入事件（input）時，會執(zhí)行回調(diào)函數(shù)。在回調(diào)函數(shù)中，通過 clearTimeout 清除之前的定時器，并重新設(shè)置一個新的定時器。這樣做的目的是確保在用戶連續(xù)輸入時只有最后一次輸入的內(nèi)容被處理。

在新的定時器中，會等待一段時間（由 arg 參數(shù)指定，單位為毫秒），然后執(zhí)行 binding.value(e)，也就是調(diào)用傳入指令的值的函數(shù)并傳遞事件對象 e。這樣就實現(xiàn)了在輸入框輸入時應(yīng)用防抖函數(shù)的效果。

指令使用

<input
    v-JDebounce:1000="handleInput"
    class="input-content"
/>

methods: {
    handleInput(event) {
        const value = event.target.value;
        if (value === "") {
            this.inputContent = "";
            return;
        }
        this.inputContent += `\n輸入了：${value}`;
    },
}

v-JDebounce:1000：這是一個自定義指令的綁定，JDebounce 是指令的名稱，1000 是指令參數(shù)，表示延遲時間為1000毫秒。
handleInput：這是一個函數(shù)名，用于處理輸入框的輸入事件。