好资源导航 » 文章资讯 » vue以组件或者插件的形式实现throttle或者debounce

vue以组件或者插件的形式实现throttle或者debounce

2023-08-23 04:45:04 70

需求

在业务中，会碰到许多点击请求的情况，在请求前改变一个lock变量（在lock变回来之前，点击无效），在请求回调中再改变lock.以确保在，请求回来之前，不会重复请求。或者类似的点击节流业务

实现方式

指令

指令

//getData是函数名，a是传入的参数 directives:{ demo:{ bind(el:Element,binding:any,vnode:VNode){ constthat:any=vnode.context //console.log(binding,vnode) //console.log(binding.arg,binding.value) if(!that[binding.arg].isBind){//打上标记，如果已经转换了，就不转了 that[binding.arg]=deb(that[binding.arg]) that[binding.arg].isBind=true } el.addEventListener('click',functionT(event:Event):void{ that[binding.arg](binding.value) }) }, }, },

组件

子组件



importVuefrom'vue';
import{Component,Prop}from'vue-property-decorator';
@Component({})
exportdefaultclassChildextendsVue{
@Prop({type:Number,default:500})publictimeOut!:number;//时间
@Prop({type:String,default:'throttle'})publictype!:string;//类型
@Prop()publicparams!:any;//传入参数
publicmessage:string='Hello';
publicthrottleLock:boolean=false;
publicdebounceLock:number=0;
publictime:any;
publicsenClick():void{
console.log(this.timeOut,this.type,this.params);
if(this.type==='throttle'){
if(this.throttleLock){
return;
}
this.throttleLock=true;
setTimeout(()=>{
this.throttleLock=false;
},this.timeOut);
this.$emit('myClick',this.params);
}elseif(this.type==='debounce'){
if(this.debounceLock){
clearTimeout(this.debounceLock);
}
this.debounceLock=setTimeout(()=>{
this.$emit('myClick',this.params);
},this.timeOut);
}else{
this.$emit('myClick',this.params);
}
}
}



div{
width:100%;
height:100%;
}

父组件


import{Component,Vue}from'vue-property-decorator';
importthrottleAndDebouncefrom'@/components/throttleAndDebounce.vue';
@Component({
components:{
throttleAndDebounce,
},
})
exportdefaultclasshomeextendsVue{
publicgetData(e:any){
console.log('异步数据',e)
}
}

plugin

函数

functiondeb(fn:function){
letlock:number
return(e)=>{
if(lock){
clearTimeout(lock)
}
console.log('创建闭包延迟执行')
lock=setTimeout(()=>{
fn(e)
},1500)
}
}
export{deb}

组件内使用



import{Component,Vue}from'vue-property-decorator';
import{deb}from'@/assets'
@Component({
components:{
throttleAndDebounce,
},
})
exportdefaultclasshomeextendsVue{
publicbeforeCreate(){
this.func=deb((e:{a:number})=>{
console.log('this',e)
})
}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

vue以组件或者插件的形式实现throttle或者debounce

热门推荐

随机推荐