VUE3+TS封装防抖和节流函数

防抖

debounce.ts

export function debounce(func: () => void, delay: number) {
    let timer: number;
    return function (this: any, ...args: any[]) {
      clearTimeout(timer);
      timer = window.setTimeout(() => {
        func.apply(this, args);
      }, delay);
    };
  }
  

使用

<template>
    <button ref="submitButton">GET</button>
  </template>
  
  <script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { debounce } from '../utils/debounce'; // 导入防抖函数
  
  // 使用 ref 访问 DOM 元素
  const submitButton = ref<HTMLElement | null>(null);
  
  onMounted(() => {
    if (submitButton.value) {
      submitButton.value.addEventListener(
        'click',
        debounce(() => {
          console.log('clicked');
        }, 1000)
      );
    }
  });
  </script>
  
  <style lang="scss" scoped>
  </style>
  

效果

节流

throttle.ts

export function throttle(func: (...args: any[]) => void, limit: number) {
    let inThrottle: boolean;
    return function (this: any, ...args: any[]) {
      if (!inThrottle) {
        func.apply(this, args);
        inThrottle = true;
        setTimeout(() => inThrottle = false, limit);
      }
    };
  }
  

使用

<template>
    <button ref="submitButton">GET</button>
  </template>
  
  <script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { throttle } from '../utils/throttle';  // 导入节流函数
  
  // 使用 ref 访问 DOM 元素
  const submitButton = ref<HTMLElement | null>(null);
  
  onMounted(() => {
    if (submitButton.value) {
      submitButton.value.addEventListener(
        'click',
        throttle(() => {
          console.log('clicked');
        }, 1000)
      );
    }
  });
  </script>
  
  <style lang="scss" scoped>
  </style>
  

效果