Vue中使用节流防抖 防止重复的点击或者滑动 lodash插件

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这个函数就可以实现防抖效果了
也可以参照官网给出的例子来写

你可能感兴趣的:(vue,js,es6,npm,前端)