浅析Vue 防抖与节流的使用

2023-08-08 20:42:04 79

在一个电影项目中，我想在电影的列表中，保存下拉的当前位置，防止你切换页面后，再切换回当前的电影列表页，他就又回到电影的第一条数据。

这时候，我不想每次只要滑动一点，就保存当前位置，我想隔一段时间，保存一次，这时候，就可以使用防抖和节流。

概念

说白了，防抖节流就是使用定时器来实现我们的目的。

防抖(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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

浅析Vue 防抖与节流的使用

热门推荐

随机推荐