实现防抖节流的自定义指令

// directives.js
export const debounce = {
  beforeMount(el, binding) {
    const delay = binding.value || 300; // 默认延迟时间为300毫秒
    let timer;
    
    el.__debounceHandler = function () {
      clearTimeout(timer);
      timer = setTimeout(() => {
        binding.value();
      }, delay);
    };

    el.addEventListener('input', el.__debounceHandler);
  },
  beforeUnmount(el) {
    el.removeEventListener('input', el.__debounceHandler);
  }
};

export const throttle = {
  beforeMount(el, binding) {
    const delay = binding.value || 300; // 默认延迟时间为300毫秒
    let timer;
    let last;

    el.__throttleHandler = function () {
      const now = Date.now();
      if (!last || now - last > delay) {
        last = now;
        binding.value();
      }
    };

    el.addEventListener('input', el.__throttleHandler);
  },
  beforeUnmount(el) {
    el.removeEventListener('input', el.__throttleHandler);
  }
};

使用

<template>
  <div>
    <input v-debounce="handleDebounce" placeholder="Debounce Input" />
    <input v-throttle="handleThrottle" placeholder="Throttle Input" />
  </div>
</template>

<script>
import { debounce, throttle } from './directives';

export default {
  directives: {
    debounce,
    throttle,
  },
  methods: {
    handleDebounce() {
      console.log('Debounced input');
    },
    handleThrottle() {
      console.log('Throttled input');
    },
  },
};
</script>

这是钩子函数：

const myDirective = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
    // 下面会介绍各个参数的细节
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode, prevVnode) {}
}