vue3+ts封装全局防抖函数

什么是防抖节流？

函数防抖（debounce）：

是指在一定时间内，在动作被连续频繁触发的情况下，动作只会被执行一次，也就是说当调用动作过n毫秒后，才会执行该动作，（例如滚动事件、表单重复提交、页面resize事件，常见于需要做页面适配的时候），让某个时间期限内，事件处理函数只执行一次。

为什么要用防抖节流？

函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。

怎么使用防抖节流？
（1）新建一个文件，例如在utils下面新建debounce.ts文件

在文件中写入公共得函数

// 防抖
// 不管怎么点击，只在500毫秒后触发事件，500毫秒内点击也要等到500毫秒后再触发事件
export const debounce = (fn: Function, delay = 500) => {
    
    
  let timer: number | null = null;
  return (...args: any[]) => {
    
    
    if (timer) {
    
    
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
    
    
      fn(...args);
    }, delay);
  }
}

（2）在需要用到的页面引入防抖节流

import {
    
    debounce}  from '@/utils/debounce'

（3）在需要用到位置（例如某些按钮上），在该按钮的点击事件上，绑定防抖或节流事件的方法

这样就可以了，当你点击触发请求的时候，会在500毫秒以后触发，当你在500毫秒内，不管怎么点击，都不会请求。