vue2中使用lodash实现节流防抖
原创大约 2 分钟约 482 字...
这两个概念在前端开发中是老生常谈,对于我来说这两个概念记了又忘,忘了又看。过的时间又忘记。写业务需要优化一些功能,这两个概念又被提了出来,这次就好好梳理一下
是什么
打个比方
防抖就类似回城,打断就得重新回。
节流就类似技能需要冷却时间到了才能用。
- 防抖:在事件被触发 n 秒后再执行回调,如果在这 n 秒内又被触发,则重新计时。
- 节流:规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。
怎么用
- 防抖
- search 搜索联想,用户在不断输入值时,用防抖来节约请求资源
- window 触发 resize 的时候,不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来让其只触发一次
- 节流
- 鼠标不断点击触发,mousedown(单位时间内只触发一次)
- 监听滚动事件,比如是否滑到底部自动加载更多,用 throttle 来判断
看代码
methods: {
// 防抖 a,b是调用xxxxx方法的参数
xxxxx:_.debounce(function (a,b) {
// ... 你的逻辑
},2000),
// 节流
xxxxxxx:_.throttle(function (a,b) {
//... 你的逻辑
},2000),
},
如下图,我们不断输入,在停止输入 2 秒后,向页面上显示的数组推入一则消息。

而节流是在开始输入时触发 1 次,然后每隔 2s 触发一次事件,这中间的输入不会触发事件。
