什么是防抖节流?
函数防抖(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毫秒内,不管怎么点击,都不会请求。