vue3+ts封装全局防抖函数

不念不忘少年蓝@ 2024-03-16 23:52 25阅读 0赞

### **什么是防抖节流？** ###

函数防抖（debounce）：

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

### **为什么要用防抖节流？** ###

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

**怎么使用防抖节流？**  
（1）新建一个文件，例如在utils下面新建debounce.ts文件  
![在这里插入图片描述][6a451c0578094be6921fc28991a85c7b.png]  
在文件中写入公共得函数

// 防抖
    // 不管怎么点击，只在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）在需要用到的页面引入`防抖`节流  
![在这里插入图片描述][8ea6d19f34b545daad7a345c0f31ff23.png]

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

（3）在需要用到位置（例如某些按钮上），在该按钮的点击事件上，绑定防抖或节流事件的方法  
![在这里插入图片描述][87605579106e40a7a31fe9440e5746b8.png]  
这样就可以了，当你点击触发请求的时候，会在500毫秒以后触发，当你在500毫秒内，不管怎么点击，都不会请求。

[6a451c0578094be6921fc28991a85c7b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/effd686101d4406b80c55d9a5ab56bc0.png
[8ea6d19f34b545daad7a345c0f31ff23.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/ab5631cc3f8f419e804b2f2821ce322b.png
[87605579106e40a7a31fe9440e5746b8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/d5779642ad2c4856b1870890f363e0bd.png