在vue中使用防抖函数组件操作

2023-07-19 21:11:03 177

初级

1、先写好防抖函数

/**
*@desc防抖函数
*@param{需要防抖的函数}func
*@param{延迟时间}wait
*@param{是否立即执行}immediate
*/
exportfunctiondebounce(func,wait,immediate){
lettimeout

returnfunction(...args){
letcontext=this
if(timeout)clearTimeout(timeout)

if(immediate){
letcallNow=!timeout
timeout=setTimeout(function(){
timeout=null
},wait)
if(callNow)func.apply(context,args)
}else{
timeout=setTimeout(function(){
func.apply(context,args)
},wait)
}
}
}

2、然后在要使用的组件里import进来

import{debounce}from'xxx'

exportdefault{
data:{
return{
vm:this
}
},
methods:{
toDoSth:debounce((vm)=>{
//这里将当前组件实例当参数传入
//就可以使用实例中定义的一些属性、方法
//补充一下，这里如果换成非箭头函数的写法，也可以直接访问实例。
},
500,
true
)
}
}

3、在组件方法中使用

template:

高级

虽然上面的写法已经能解决问题了，但是总觉得不够美观。

在网上搜索一番，看到有个哥们将防抖封装成一个组件，果然和我想的一样。不过这哥们直接将上下文当参数传进来了，比我把整个实例传进来高明，我在这个基础上添加了immediate的功能，还有添加了默认不传event参数的情况处理。

debounce.js文件：

importVuefrom'vue'

constdebounce=(func,time,ctx,immediate)=>{
lettimer
constrtn=(...params)=>{
clearTimeout(timer)

if(immediate){
letcallNow=!timer
timer=setTimeout(()=>{
timer=null
},time)
if(callNow)func.apply(ctx,params)
}else{
timer=setTimeout(()=>{
func.apply(ctx,params)
},time)
}
}
returnrtn
}

Vue.component('Debounce',{
abstract:true,
props:['time','events','immediate'],
created(){
this.eventKeys=this.events&&this.events.split(',')
},
render(){
constvnode=this.$slots.default[0]

//如果默认没有传events，则对所有绑定事件加上防抖
if(!this.eventKeys){
this.eventKeys=Object.keys(vnode.data.on)
}

this.eventKeys.forEach(key=>{
vnode.data.on[key]=debounce(
vnode.data.on[key],
this.time,
vnode,
this.immediate
)
})

returnvnode
}
})

使用方式：

1、引入debounce.js文件

import'xxx/debounce.js'

exportdefault{
methods:{
toDoSth(e){
//这里正常写就可以了
}
}
}

2、在模版里使用。

其中time为必选参数。event和immediate参数都是可选参数。

如果组件下有多个事件绑定，那么event可以自定义需要进行防抖处理的事件。

如果需要立即执行的话，可以将immediate参数设置为true。


clickme

到此就完成了一次Debounce组件的封装。

补充知识：vue防抖函数，避免暴力点击

1.vue项目/src/components/directive/clickAgain.js

importVuefrom'vue'

constclickAgain=Vue.directive('clickAgain',{
//指令的定义
bind(el,binding,vnode,oldVnode){
//绑定this
letself=vnode.context;
el.onclick=function(e){
if(self._is_click){
returnfalse;
}
/*执行指令绑定的事件*/
self[binding.expression]()
self._is_click=true;
setTimeout(()=>{
self._is_click=false;
},2000)

};
}
});
exportdefaultclickAgain

2.在main.js引入

importclickAgainfrom'./components/directive/clickAgain.js'

/*引入避免暴力双击点击*/

Vue.use(clickAgain);

3.使用


保存

以上这篇在vue中使用防抖函数组件操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

在vue中使用防抖函数组件操作

热门推荐

随机推荐