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

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

定义

节流: n 秒内只运⾏⼀次，若在 n 秒内重复触发，只有⼀次⽣效 防抖: n 秒后在执⾏该事件，若在 n 秒内被重复触发，则重新计时

相同点： 都可以通过使⽤ setTimeout 实现 ⽬的都是，降低回调执⾏频率。节省计算资源

不同点：

函数防抖，在⼀段连续操作结束后，处理回调，利⽤ clea rTimeout 和 setTimeout 实现。函 数节流，在⼀段连续操作中，每⼀段时间只执⾏⼀次，频率较⾼的事件中使⽤来提⾼性能 函数防抖关注⼀定时间连续触发的事件，只在最后执⾏⼀次，⽽函数节流⼀段时间内只执⾏⼀次 例如，都设置时间频率为500ms，在2秒时间内，频繁触发函数，节流，每隔 500ms 就执⾏⼀次。防 抖，则不管调动多少次⽅法，在2s后，只会执⾏⼀次

应⽤场景

防抖在连续的事件，只需触发⼀次回调的场景有： 搜索框搜索输⼊。只需⽤户最后⼀次输⼊完，再发送请求 ⼿机号、邮箱验证输⼊检测 窗⼝⼤⼩ resize 。只需窗⼝调整完成后，计算窗⼝⼤⼩。防⽌重复渲染。 节流在间隔⼀段时间执⾏⼀次回调的场景有： 滚动加载，加载更多或滚到底部监听 搜