浅析Vue 防抖与节流的使用
在一个电影项目中,我想在电影的列表中,保存下拉的当前位置,防止你切换页面后,再切换回当前的电影列表页,他就又回到电影的第一条数据。
这时候,我不想每次只要滑动一点,就保存当前位置,我想隔一段时间,保存一次,这时候,就可以使用防抖和节流。
概念
说白了,防抖节流就是使用定时器来实现我们的目的。
防抖(debounce):
在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。
典型的案例就是输入框搜索:输入结束后n秒才进行搜索请求,n秒内又输入的内容,则重新计时。
节流(throttle):
规定在一个单位时间内,只能触发一次函数,如果这个单位时间内触发多次函数,只有一次生效。
典型的案例就是鼠标不断点击触发,规定在n秒内多次点击只生效一次。
用法
防抖(debounce)
下拉列表,隔一段时间保存当前下拉位置。
我们可以在mounted钩子中实现我们的防抖:
//防抖定时器 lettimer; //list就是电影列表ref="list"$el获取DOM元素 this.$refs.list.$el.addEventListener("scroll",e=>{ console.log("---->",e.target.scrollTop)//不使用防抖 if(timer){ //清空timer clearTimeout(timer); } timer=setTimeout(()=>{ console.log(e.target.scrollTop)//使用防抖 //在sessionStorage中保存当前下拉位置 //sessionStorage.setItem("position",e.target.scrollTop); },75);//75mm为最佳 });
效果演示(隔一段时间保存当前位置):
加---->为不使用防抖,没加的则使用防抖
输入框搜索隔段时间进行搜索请求:
节流(throttle)
在n秒内点击多次,只有一次生效。
效果演示:
补充
当然,也可以对这两个方法进行封装,以便在多处使用。
/** *函数防抖(只执行最后一次点击) */ 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); } }; /* *函数节流 */ 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); } } };
总结
以上所述是小编给大家介绍的Vue防抖与节流的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。