Vue中使用节流防抖 防止重复的点击或者滑动 lodash插件
在我们需要做代码优化的时候,这个时候我们的节流防抖就非常的有作用了,
这次我们使用一个插件来完成节流防抖
这次使用(lodash插件)
首先要安装lodash插件
npm i --save lodash
然后呢我们就开始写我们的节流防抖
找到我们需要使用的vue文件然后引入就可以
import _ from 'lodash';
注意:这里的 _ 是lodash的一个可以说是标志性的一个东西
// 防抖函数_.debounce(func, [wait=0], [options={}])
//在方法里调用这个函数 注意这里不可以写箭头函数,否则他的this指向则会被指到lodash里
SectScroll : _.debounce( function(e){
//获取滚动高度
if(e. target. scrollTop>100){
//判断是否改变相对应的class类名
this . headClass = true
}else{
this.headClass = false
}, 800),
}
通过这个.debounce这个函数就可以实现防抖效果了
也可以参照官网给出的例子来写