Vue 封装防抖、节流自定义指令

防抖自定义指令 v-debounce (点击事件)

1. 新建 debounce.js

import { ref, onMounted, onUnmounted } from 'vue';

export default {
  mounted(el, binding) {
    const func = binding.value;
    let timer;
    el.addEventListener('click', (e) => {
      if (timer) clearTimeout(timer);
      timer = setTimeout(() => func(e), 300); // 300ms 是延迟时间，可以根据需要调整
    });
  },
  unmounted(el) {
    el.removeEventListener('click', () => {});
  }
};

2. 安装并导入自定义指令 src/directive/index,js

import debounce from './path-to-debounce-directive';

app.directive('debounce', debounce);

3. 使用方法

<button v-debounce="handleClick">Click me (debounced)</button>

---

节流自定义指令 v-throttle (点击事件)

1. 新建 throttle.js

import { ref, onMounted, onUnmounted } from 'vue';

export default {
  mounted(el, binding) {
    const func = binding.value;
    let lastCall = 0;
    const delay = 300; // 300ms 是间隔时间，可以根据需要调整
    el.addEventListener('click', (e) => {
      const now = new Date().getTime();
      if (now - lastCall < delay) {
        return;
      }
      lastCall = now;
      func(e);
    });
  },
  unmounted(el) {
    el.removeEventListener('click', () => {});
  }
};

2. 安装并导入自定义指令 src/directive/index,js

import throttle from './path-to-throttle-directive';

app.directive('throttle', throttle);

3. 使用方法

<button v-throttle="handleClick">Click me (throttled)</button>