vue2中使用lodash实现节流防抖
原创大约 2 分钟约 612 字
说说节流和防抖
这两个概念在前端开发中是老生常谈,对于我来说这两个概念记了又忘,忘了又看。过的时间又忘记。写业务需要优化一些功能,这两个概念又被提了出来,这次就好好梳理一下
解释
::: tip 打个比方
防抖就类似回城,打断就得重新回。
节流就类似技能需要冷却时间到了才能用。
:::
防抖:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。
节流:规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。
函数防抖和函数节流都是防止某一时间频繁触发,但是这两兄弟之间的原理却不一样。节流防抖就好比乘电梯,比如delay是10秒,防抖就是电梯每进来一个人就要等10秒再运行,而节流就是电梯保证每10秒可以运行一次
结合应用场景
- 防抖
- search搜索联想,用户在不断输入值时,用防抖来节约请求资源
- window触发resize的时候,不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来让其只触发一次
- 节流
- 鼠标不断点击触发,mousedown(单位时间内只触发一次)
- 监听滚动事件,比如是否滑到底部自动加载更多,用throttle来判断
造个轮子
// TODO 手写防抖 节流
使用lodash
造什么轮子?lodash写的不好?
methods: {
// 防抖 a,b是调用xxxxx方法的参数
xxxxx:_.debounce(function (a,b) {
// ... 你的逻辑
},2000),
// 节流
xxxxxxx:_.throttle(function (a,b) {
//... 你的逻辑
},2000),
},
如下图,我们不断输入,在停止输入2秒后,向页面上显示的数组推入一则消息。
而节流是在开始输入时触发1次,然后每隔2s触发一次事件,这中间的输入不会触发事件。