vue3+ts封装全局节流和防抖函数

在Vue3 + TypeScript项目中，为了优化性能，经常需要使用节流和防抖函数来控制函数的执行频率。这里我们可以封装全局的节流和防抖函数，方便在整个项目中使用。

封装全局节流函数

import { ref } from 'vue';

export const useThrottle = (fn: Function, delay: number) => {
  const canRun = ref(true);
  return (...args: any[]) => {
    if (!canRun.value) return;
    canRun.value = false;
    setTimeout(() => {
      fn(...args);
      canRun.value = true;
    }, delay);
  };
};

我们可以使用useThrottle函数来封装节流函数，传入需要执行的函数和执行间隔时间，返回一个新的函数。当这个函数被触发时，会判断是否可以执行。如果可以执行，就会将canRun设置为false，并在一定时间后将其重置为true，使得下一次调用可以再次执行。

封装全局防抖函数

import { ref } from 'vue';

export const useDebounce = (fn: Function, delay: number) => {
  let timer: ReturnType<typeof setTimeout>;
  return (...args: any[]) => {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn(...args);
    }, delay);
  };
};

我们可以使用useDebounce函数来封装防抖函数，传入需要执行的函数和执行间隔时间，返回一个新的函数。当这个函数被触发时，会清除之前的定时器，并重新设置一个新的定时器，在一定时间后执行传入的函数。

使用全局节流和防抖函数

封装好全局节流和防抖函数后，我们可以在整个项目中使用它们。例如，在Vue组件中使用：

import { useThrottle, useDebounce } from '@/utils/throttle-debounce';

export default {
  setup() {
    const handleClick = useThrottle(() => {
      console.log('click');
    }, 1000);

    const handleInput = useDebounce((value: string) => {
      console.log(value);
    }, 500);

    return {
      handleClick,
      handleInput,
    };
  },
};

在上面的例子中，我们在setup函数中使用useThrottle和useDebounce函数来封装handleClick和handleInput函数，分别实现了点击和输入事件的节流和防抖效果。