vue3实现防抖hook

包装函数并延迟执行，避免频繁触发，常用于前端页面搜索框优化处理（只在输入停止的时候才去执行相应的操作）

src/hook/useDebounce.ts

javaScript 复制代码

import { ref, watch } from 'vue';

/**
 * 防抖 Hook
 * @param fn - 需要防抖的函数
 * @param delay - 延迟时间(毫秒)，默认300ms
 * @returns 包含防抖函数和清除定时器的方法
 */
export function useDebounce<T extends (...args: any[]) => any>(
  fn: T,
  delay: number = 300
) {
  // 存储定时器ID
  const timer = ref<NodeJS.Timeout | null>(null);

  // 防抖处理函数，保持原函数的参数类型
  const debouncedFn = (...args: Parameters<T>): void => {
    // 清除已有定时器
    if (timer.value) {
      clearTimeout(timer.value);
    }

    // 设置新定时器
    timer.value = setTimeout(() => {
      fn.apply(this, args);
      timer.value = null;
    }, delay);
  };

  // 组件卸载时清除定时器，防止内存泄漏
  watch(
    () => {},
    () => {
      if (timer.value) {
        clearTimeout(timer.value);
      }
    },
    { once: true }
  );

  // 手动清除定时器的方法
  const clearDebounce = (): void => {
    if (timer.value) {
      clearTimeout(timer.value);
      timer.value = null;
    }
  };

  return { debouncedFn, clearDebounce };
}

应用

javaScript 复制代码

import { ref } from "vue";
import { useDebounce } from "@/hook/useDebounce";
const handleSearch = keyword => {
  console.log("搜索:", keyword);
  // 实际的搜索逻辑...
};
// 在输入框变化时调用防抖函数、使用防抖Hook，延迟500ms
const { debouncedFn: debouncedSearch } = useDebounce(handleSearch, 500);

javaScript 复制代码

      <el-input
        v-model="searchValue"
        placeholder="请输入内容"
        @input="debouncedSearch"
      />

其他

ref<NodeJS.Timeout | null>(null) ：
- ref ：Vue3 提供的创建响应式数据的函数，会将传入的值包装为一个响应式对象（Ref 类型），方便在组件中追踪其变化。
- <NodeJS.Timeout | null> ：TypeScript 的类型注解，指定 ref 存储的值类型只能是两种之一：
  - NodeJS.Timeout：Node.js 环境中定时器的类型（setTimeout 的返回值类型），表示一个活跃的定时器实例。
  - null：表示没有活跃的定时器（初始状态或定时器已被清除）。
- (null) ：初始化 ref 的值为 null，即初始状态下没有定时器。
T extends (...args: any[]) => any
- 是 TypeScript 中的泛型约束 ，用于限制泛型 T 的类型范围，具体含义如下：

拆解说明：

T：是定义的泛型变量，代表 "某种类型"，具体类型会在使用时动态确定。
extends：泛型约束关键字，表示 "T 必须是某种类型的子类型"。
(...args: any[]) => any：一个函数类型的 "模板"，表示：
- (...args: any[])：函数可以接收任意数量、任意类型的参数（args 是参数数组）。
- => any：函数返回值可以是任意类型。