setup(){
onMounted(()=>{
flag=true;
window.addEventListener('scroll',thorrle(scrollValue,1000))
})
let flag=true;
function thorrle(fn,interval){
let last=0;
return function(){
if(!flag) return false;
let context=this;
let args=arguments;
let now=new Date();
if((now-last)>interval){
last=now;
//劫持当前所在的方法返回fn的方法的内容
fn.apply(context,args);
}
}
}
function scrollValue(){
console.log('滚动了');
}
onUnmounted(()=>{
//这里为什么在卸载时设置falg为false因为vue是单页面应用,当切换另一个页面时
//window的监听还会存在,所以设置flag为false进行拦截
flag=false;
console.log('监听卸载了');
window.removeEventListener('scroll',scrollValue)
})
}
节流的实例(在vue3中的使用)
最新推荐文章于 2024-07-25 10:42:11 发布