Vue3 + TypeSrcipt 防抖、防止重复点击实例

需要实现防抖应用场景：

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

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

TypeScript 复制代码

<script setup lang="ts" name="ReagentTransactionsDrawer">
......
// 查询，没有防抖，可以重复点击
const onQueryClick = async () => {
  // 检查
  if (
    queryObj.value.transactionTime.length === 0 &&
    !queryObj.value.transactionType &&
    !queryObj.value.materialName
  ) {
    ElMessage.warning("请输入查询条件！");
    return;
  }
  transactionsList.value = [];
  let result = await branchWarehouseTransactionsQueryForReagentService(queryObj.value);
  transactionsList.value = result.data;
};
......
</script>

<template>
......
              <el-button class="btn-same-width" type="primary" plain @click="onQueryClick">查询</el-button>
......
</template>

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

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

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

3、使用 preventReClick 防止重复点击

TypeScript 复制代码

<script setup lang="ts" name="ReagentTransactionsDrawer">
......
import { usePreventReClick } from "@/hooks/usePreventReClick";
const { preventReClick } = usePreventReClick();

// 查询，加装 preventReClick 防抖器，防止重复点击
const onQueryClick = async () => {
  preventReClick(async () => { // 改动1：增加防抖代码
    // 检查
    if (
      queryObj.value.transactionTime.length === 0 &&
      !queryObj.value.transactionType &&
      !queryObj.value.materialName
    ) {
      ElMessage.warning("请输入查询条件！");
      return;
    }
    transactionsList.value = [];
    let result = await branchWarehouseTransactionsQueryForReagentService(queryObj.value);
    transactionsList.value = result.data;
  }); // 改动2：增加防抖代码
};
......
</script>

<template>
......
              <el-button class="btn-same-width" type="primary" plain @click="onQueryClick">查询</el-button>
......
</template>

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

TypeScript 复制代码

import { ref } from "vue";

type AsyncFunction = () => Promise<any>;

/**
 * 防止重复点击 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 防止重复点击

TypeScript 复制代码

<script setup lang="ts" name="ReagentTransactionsDrawer">
......
import { debounce } from "lodash-es";

// 查询，加装 debounce 防抖器，防抖处理（leading: true，立即执行、maxWait: 1000，1秒内至少执行一次）
const onQueryClick = debounce( // 改动1：const onQueryClick = async () => { 改为 const onQueryClick = debounce(
  async () => {
    // 检查
    if (
      queryObj.value.transactionTime.length === 0 &&
      !queryObj.value.transactionType &&
      !queryObj.value.materialName
    ) {
      ElMessage.warning("请输入查询条件！");
      return;
    }
    transactionsList.value = [];
    let result = await branchWarehouseTransactionsQueryForReagentService(queryObj.value);
    transactionsList.value = result.data;
  }, // 改动2：} 改为 },
  1000, // 改动3：增加防抖代码
  { leading: true, trailing: true, maxWait: 1000 } // 改动4：增加防抖代码
); // 改动5：增加防抖代码
......
</script>

<template>
......
              <el-button class="btn-same-width" type="primary" plain @click="onQueryClick">查询</el-button>
......
</template>

三、使用自定义防抖组件

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

2、导入防抖组件

3、在模板中使用组件

TypeScript 复制代码

<script setup lang="ts" name="ReagentTransactionsDrawer">
......
import BasePreventReClickButton from "@/components/base/BasePreventReClickButton.vue";

// 查询，使用 BasePreventReClickButton 防抖组件，防止重复点击
const onQueryClick = async () => {
  // 检查
  if (
    queryObj.value.transactionTime.length === 0 &&
    !queryObj.value.transactionType &&
    !queryObj.value.materialName
  ) {
    ElMessage.warning("请输入查询条件！");
    return;
  }
  transactionsList.value = [];
  let result = await branchWarehouseTransactionsQueryForReagentService(queryObj.value);
  transactionsList.value = result.data;
};
......
</script>

<template>
......
              <BasePreventReClickButton class="btn-same-width" type="primary" plain @click="onQueryClick">查询</BasePreventReClickButton> <!-- 改动1：改用防抖组件 BasePreventReClickButton -->
......
</template>

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

TypeScript 复制代码

/** * 防止重复点击按钮组件（防抖按钮组件） */
<script setup lang="ts" name="BasePreventReClickButton">
import { ref } from "vue";

const props = withDefaults(
  defineProps<{
    onClick: () => Promise<void> | void;
    delay?: number;
  }>(),
  {
    delay: 0
  }
);

// 加载标识
const loading = ref(false);

// 点击事件
const handleClick = async (): Promise<void> => {
  if (loading.value) return;
  loading.value = true;
  try {
    await props.onClick();
  } finally {
    let delay = props.delay;
    if (delay < 0) delay = 0;
    setTimeout(() => {
      loading.value = false;
    }, delay);
  }
};
</script>

<template>
  <!-- v-bind="$attrs" 绑定父组件传递的所有属性 -->
  <!-- 设置当前组件的个性属性，可以覆盖父组件属性 :loading="loading" :disabled="loading" @click="handleClick" -->
  <el-button v-bind="$attrs" :loading="loading" :disabled="loading" @click="handleClick">
    <!-- 插槽 -->
    <slot></slot>
  </el-button>
</template>

<style scoped lang="scss"></style>