01
前言
防抖和节流是前端解决频繁执行函数，以优化性能和用户体验。
防抖（Debounce）
连续触发某个事件时，当一定时间内没有再次触发事件时，才会执行事件的处理函数。 通俗来讲，就是有连续的事件触发时，前面的事件触发都被打断，不再执行，我只执行最后一次。可以想象一下王者回城被敌方英雄打断了，是不是又要进行重新回城，只有不被打断才能回城成功。
举个典型的案例：前端输入框，鼠标抬起事件，就会向后端发送一个请求，查询结果，但是想一下，如果鼠标每抬起一次，就往后端发送一个请求，频繁的请求后端，服务器的压力会非常大，所以，防抖就是为了防止频繁请求，我们可以通过定时器来记录，如果用户在一段时间内没有再执行某个事件，就代表可以执行处理函数，向后端发送请求了。
节流（Thrott le）
在一段时间内只执行一次处理函数，不管触发事件多少次。
节流的思想就是用定时器来记录，如果在一段时间内又再次调用处理函数，我们可以将这次执行失效，也就是说某个函数在一定时间间隔内只执行第一次的回调， 通俗来讲，就是在我第一次函数没执行完之前，不要打断我，无视后面的函数执行。可以想象一下王者中技能释放，技能放完了，是不是就没有办法再次放了，只有等CD结束后，才能再次释放。
举个典型的例子：
（1）有个button按钮是向后端进行发送请求获取结果数据的，现在用户一直频繁的点击按钮，那么能一直的请求后端服务吗？显然是不合适的，这样会造成后端服务压力的提升，而且页面也会频繁加载，影响体验。所以添加节流函数，防止那么无意义的请求。
（2）页面滚动事件，如果页面滚动1px就触发某个处理函数，页面会造成明显卡顿，不想滚动事件处理函数高频触发，而是希望每100毫秒最多执行一次，可以使用节流函数，减少计算提升性能。
区别
- 节流：间隔时间执行，不管事件触发有多频繁，都会保证在规定时间内一定会执行一次。
- 防抖：用户触发事件过于频繁，只会执行最后一次事件的操作。
02
节流实现
节流函数， 其中，func就是我们需要进行节流处理的函数，wait是事件执行的最小间隔时间，每隔wait才会执行一次func函数。
function throttle(func, wait) {
let timeId;
return function(...args) {
if (!timeId) {
timeId = setTimeout(() => {
func.apply(this, args);
timeId = null;
}, wait);
}
};
}
防抖实现
防抖函数，其中func就是我们需要进行防抖处理的函数，wait是事件执行的最小间隔时间，当事件触发后wait时间内没有再次触发事件，才会执行func函数。
function debounce(func, wait) {
let timeId;
return function(...args) {
clearTimeout(timeId);
timeId = setTimeout(() => {
func.apply(this, args);
}, wait);
};
}
第三方lodash库实现
上面都是手写实现的，那么也可以实现第三方库现成的方法，进行实现。比如lodash库，首先安装lodash库到项目依赖中
npm install --save lodash
（1）节流实现
import debounce from 'lodash/debounce'
function func(){
//处理的逻辑代码
}
//直接调用debounce方法，传递逻辑函数和间隔时间
const debounceFunc = debounce(this.func,1000);
（2）防抖实现
import throttle from 'lodash/throttle'
function func(){
//处理的逻辑代码
}
//直接调用throttle方法，传递逻辑函数和间隔时间
const throttleFunc = throttle(this.func,1000);
好了，今天分享的技术就到这里啦，点赞关注一下，更多技术干货持续更新中，感谢您的支持！