防抖(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 ??