在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
废话不多说，直接上代码吧！
/**
*函数防抖(只执行最后一次点击)
*@paramfn
*@paramdelay
*@returns{Function}
*@constructor
*/
exportconstDebounce=(fn,t)=>{
letdelay=t||500;
lettimer;
console.log(fn)
console.log(typeoffn)
returnfunction(){
letargs=arguments;
if(timer){
clearTimeout(timer);
}
timer=setTimeout(()=>{
timer=null;
fn.apply(this,args);
},delay);
}
};
/**
*函数节流
*@paramfn
*@paraminterval
*@returns{Function}
*@constructor
*/
exportconstThrottle=(fn,t)=>{
letlast;
lettimer;
letinterval=t||500;
returnfunction(){
letargs=arguments;
letnow=+newDate();
if(last&&now-last{
last=now;
fn.apply(this,args);
},interval);
}else{
last=now;
fn.apply(this,args);
}
}
};
用法
...
methods:{
getAliyunData:Throttle(function(){
...
},1000),
}
...
以上这篇在vue中使用防抖和节流,防止重复点击或重复上拉加载实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。