节流防抖详细讲解 + 实现

防抖（Debouncing）： 防抖是指在事件被触发后，等待一定的时间间隔，如果在这个时间间隔内再次触发该事件，则重新计时。只有当事件停止触发一段时间后，才会执行相应的操作。防抖常用于优化输入框的搜索建议、滚动事件等场景，可以减少不必要的请求或操作，提升性能。

节流（Throttling）： 节流是指在一定的时间间隔内只触发一次事件，即使事件在这段时间内多次触发，也只会执行一次相应的操作。节流常用于优化滚动事件、窗口调整事件等，可以减少事件处理的频率，提高性能。

参考下图进行理解，认识哪个是节流？哪个是防抖？

-- 节流防抖可以借助第三方库 lodash 实现：

Lodash 简介 | Lodash中文文档 | Lodash中文网

1. 安装 lodash：

npm i lodash --save

2. 在使用的页面中进行引入：

import _ from "lodash";

3. 使用：

节流：

1）在页面中设置一个触发事件

2）用 lodash 中的 throttle 方法包裹函数实现节流

handleSearch: _.throttle(function (e) {
    //执行操作
},1000)

防抖：

1）在页面中设置一个触发事件

2）用 lodash 中的 debounce 方法包裹函数实现节流

handleSearch: _.debounce(function (e) {
    //执行操作
},1000)

_.debounce(func, [wait=0], [options=])

如想要使用纯原生方法可以参考下方博客：

通过原生js 实现一个节流函数和防抖函数（核心代码）_原生js节流-CSDN博客

在小程序中如何使用 lodash ？？

微信小程序中使用lodash会报错，问题解决-CSDN博客