Vue2.x-使用防抖以及节流的示例

2023-07-04 21:45:03 337

utils:

//防抖 exportconstdebounce=(func,wait=3000,immediate=true)=>{ lettimeout=null; returnfunction(){ letcontext=this; letargs=arguments; if(timeout)clearTimeout(timeout); if(immediate){ varcallNow=!timeout;//点击第一次为true时间内点击第二次为false时间结束则重复第一次 timeout=setTimeout(()=>{ timeout=null; },wait);//定时器ID if(callNow)func.apply(context,args); }else{ timeout=setTimeout(function(){ func.apply(context,args); },wait); } }; }; //时间戳方案 exportconstthrottleTime=(fn,wait=2000)=>{ varpre=Date.now(); returnfunction(){ varcontext=this; varargs=arguments; varnow=Date.now(); if(now-pre>=wait){ fn.apply(context,args); pre=Date.now(); } }; }; //定时器方案 exportconstthrottleSetTimeout=(fn,wait=3000)=>{ vartimer=null; returnfunction(){ varcontext=this; varargs=arguments; if(!timer){ timer=setTimeout(function(){ fn.apply(context,args); timer=null; },wait); } }; };

vue中使用：

*{ margin:0; font-size:20px; user-select:none; } .main{ position:absolute; left:50%; transform:translateX(-50%); width:500px; } button{ margin-bottom:100px; }

解释：

防抖：

立即执行版本：immediate为true，则点击第一次就执行，再继续点击则不执行，当wait时间结束后，再点击则生效，也就是只执行第一次。

原理：

点击第一次不存在timeoutID,并且callNow为true，则立即执行目标代码，点击第二次时存在了timeoutID,并且callNow为false,所以不执行目标代码，当wait时间结束后，把timeoutID设为null，则开始重复立即执行逻辑。

不立即执行版：immediate为false，则点击第一次不执行，当wait时间结束后，才生效，也就是无论点击多少次，只执行最后一次点击事件

原理：

使用setTimeout延迟执行事件，如果多次触发，则clearTimeout上次执行的代码，重新开始计时，在计时期间没有触发事件，则执行目标代码。

节流：

连续触发事件时以wait频率执行目标代码。

效果：

以上就是Vue2.x-使用防抖以及节流的示例的详细内容，更多关于vue防抖及节流的资料请关注毛票票其它相关文章！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Vue2.x-使用防抖以及节流的示例

utils:

vue中使用：

解释：

防抖：

节流：

热门推荐

随机推荐