什么是防抖和节流？有什么区别，如何实现？

什么是防抖和节流

作⽤：本质上是优化⾼频率执⾏代码的⼀种⼿段

如：浏览器的 resize 、 scroll 、 keypress 、 mousemove 等事件在触发时，会不断地调⽤绑定在事 件上的回调函数，极⼤地浪费资源，降低前端性能 为了优化体验，需要对这类事件进⾏调⽤次数的限制，对此我们就可以采⽤ throttle （防抖）和 debounce （节流）的⽅式来减少调⽤频率

防抖

在n秒后执行该事件，若在n秒内连续触发事件，则重新计时

应用场景：比如在做搜索功能时，如果不做防抖功能，那么每输入一次，就会发起请求，

而做了防抖功能，用户最后一次输入完，再发送请求

功能实现 （搜索）

1.data中定义一个定时器，默认为null
data() {
    return {
        timer:null
    }
}
2.在搜索框键盘输入事件input事件中添加防抖
input(val) {
    3.先清除timer定时器
    clearwTimeout(this.timer)
    4.重新启动一个定时器，赋值给timer，500毫秒后触发事件
    this.timer = setTimeout(()=> {
        5.给搜索关键字赋值
        6.请求搜索列表数据
    },500)
}

节流

在n秒内只执行一次事件，如果n秒内多次触发事件

应用场景：轮播图点击效果，鼠标移动，滚动条滚动，上拉加载等

轮播图点击：轮播图完成切换需1秒，不加节流，快速点击，嗖嗖的切换，加了节流，不管点击多少次，1秒内只执行一次

上拉加载时添加节流阀

1. data中定义节流阀变量isLoading:false

2. 请求数据前打开节流阀isLoading:true，请求数据后关闭节流阀isLoading:false

3. 再一次请求数据时，判断节流阀的状态，如果为true就停止请求，为false时，在开始请求