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

青旅半醒 2023-10-12 22:56 39阅读 0赞

在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`函数，分别实现了点击和输入事件的节流和防抖效果。