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

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

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

說在前面

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

什么是防抖

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

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

效果展示

實現原理

防抖函數實現步驟

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

基本的防抖函數示例

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)建一個防抖函數
const debouncedFunction = debounce(() => {
  console.log('Debounced function is executed');
}, 300); // 設置延遲時間為300毫秒

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

這種基礎的寫法應該大部分同學都可以很輕松的寫出來，這里就不過多贅述了，主要看下怎么將其封裝成一個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); // 設置延遲時間，單位為毫秒
        });
    },
};

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

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

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

指令使用

<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 是指令參數，表示延遲時間為1000毫秒。
handleInput：這是一個函數名，用于處理輸入框的輸入事件。