Vue3 + TypeSrcipt 防抖实例

需要实现防抖应用场景：

点击【查询】按钮，发送网络请求，等待并接收响应数据

原来点击【查询】的代码：

一、使用自定义的防止重复点击组合式函数 hook 

1、编写防止重复点击组合式函数 hook，usePreventReClick.ts

2、导入防止重复点击组合式函数 hook

3、使用 preventReClick 防止重复点击

 防止重复点击组合式函数 hook，usePreventReClick.ts

import { ref } from "vue";

type AsyncFunction = () => Promise;

/**
 * 防止重复点击 hook
 * @returns
 */
export function usePreventReClick() {
  const isClicking = ref(false);
  const preventReClick = async (fn: AsyncFunction) => {
    if (isClicking.value) {
      return;
    }
    isClicking.value = true;
    try {
      await fn();
    } finally {
      isClicking.value = false;
    }
  };

  return {
    isClicking,
    preventReClick
  };
}

 二、使用lodash-es的debounce

1、安装 lodash-es 工具库

2、按需使用导入debounce

3、使用 debounce 防止重复点击

三、使用自定义防抖组件 

1、编写防止重复点击按钮组件（防抖按钮组件），BasePreventReClickButton.vue

2、导入防抖组件

3、在模板中使用组件

防止重复点击按钮组件（防抖按钮组件），BasePreventReClickButton.vue

/** * 防止重复点击按钮组件（防抖按钮组件） */