快捷導(dǎo)航

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

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

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

說在前面

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

什么是防抖

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

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

效果展示

實(shí)現(xiàn)原理

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

1、當(dāng)需要執(zhí)行某個(gè)操作時(shí)，首先設(shè)置一個(gè)定時(shí)器。
2、如果在規(guī)定的時(shí)間間隔內(nèi)再次觸發(fā)了該操作，則清除之前的定時(shí)器。
3、重新設(shè)置一個(gè)新的定時(shí)器，以確保在最后一次觸發(fā)操作后的一段時(shí)間內(nèi)不再觸發(fā)操作。
4、最終在最后一次觸發(fā)操作后的時(shí)間間隔結(jié)束時(shí)執(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)建一個(gè)防抖函數(shù)
const debouncedFunction = debounce(() => {
  console.log('Debounced function is executed');
}, 300); // 設(shè)置延遲時(shí)間為300毫秒

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

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

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

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

在新的定時(shí)器中，會等待一段時(shí)間（由 arg 參數(shù)指定，單位為毫秒），然后執(zhí)行 binding.value(e)，也就是調(diào)用傳入指令的值的函數(shù)并傳遞事件對象 e。這樣就實(shí)現(xiàn)了在輸入框輸入時(shí)應(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：這是一個(gè)自定義指令的綁定，JDebounce 是指令的名稱，1000 是指令參數(shù)，表示延遲時(shí)間為1000毫秒。
handleInput：這是一個(gè)函數(shù)名，用于處理輸入框的輸入事件。