Vue3自定义指令实现防抖节流（支持所有eventType，建议收藏）

该篇从本人另一篇Vue3项目性能优化（示例）_临枫541的博客-CSDN博客抽离，让更多小伙伴搜集到。

防抖节流是什么？

• 防抖节流一直是性能优化的有效手段，减轻服务器的负担，也可以减少后端老哥的问候；
• 请你复制我的代码去实操或者看最后的演示，一下就懂，如果还有不懂的地方，欢迎在评论区留言。

一步步来，先看看我是在哪个文件封装的：

 在src/utils/index.ts暴露modules中instruction.ts（指令）文件中的所有方法，接下来看看代码

// instruction.ts

// 防抖指令封装
export const useDebounceDirective = (delay: number) => {
  return {
    beforeMount(el: HTMLElement, binding: any) {
      let timer: number;

      el.addEventListener(binding.arg, () => {
        clearTimeout(timer);
        timer = setTimeout(() => {
          binding.value();
        }, delay);
      });
    }
  };
};

// 节流指令封装
export const useThrottleDirective = (delay: number) => {
  return {
    beforeMount(el: HTMLElement, binding: any) {
      let throttled = false;

      el.addEventListener(binding.arg, () => {
        if (!throttled) {
          throttled = true;
          setTimeout(() => {
            binding.value();
            throttled = false;
          }, delay);
        }
      });
    }
  };
};

// utils/index.ts

export * from './modules/instruction';

组件中的代码

<template>
  <div>
    <input v-debounce:input="onInput" placeholder="输入内容"><br>
    <button v-debounce:click="onClickDebounce">点击防抖按钮</button>
    <button v-throttle:click="onClickThrottle">点击节流按钮</button>
  </div>
</template>

<script lang="ts" setup>
function onInput() {
  console.log('输入框防抖事件');
}

function onClickDebounce() {
  console.log('防抖事件');
}

function onClickThrottle() {
  console.log('节流事件')
}
</script>

<script lang="ts">
import { useDebounceDirective, useThrottleDirective } from "@/utils";

export default {
  directives: {
    debounce: useDebounceDirective(500),
    throttle: useThrottleDirective(1000)
  }
}
</script>


<style scoped>

</style>

亲测好用，而且很符合真实项目的需求（本来要插入有音频的视频。最后发现点击进入该博客会立刻播放音频，可能导致用户懵圈，平台还没解决该问题）

控制台打印效果