关于节流防抖
1、知识点
函数防抖 是指在事件被触发 n 秒后再执行回调,如果在这 n 秒内事件又被触发,则重新计时。这可以使用在一些点击请求的事件上,避免因为用户的多次点击向后端发送多次请求
函数节流 是指规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。节流可以使用在 scroll 函数的事件监听上,通过事件节流来降低事件调用的频率
2、防抖
只要不是最后一次触发,就不执行异步请求
<template>
<div @scroll="onscroll($event)" class="aa"></div>
</template>
<script>
export default {
name: "aa",
data() {
return {
timer: "",
};
},
methods: {
onscroll(e) { //只要鼠标滚动就会运行一次
if (this.timer !== undefined) { //清除除了0.4秒发请求那次以外的定时器
clearTimeout(this.timer); //清除定时器 定时器将变为undefined
}
this.timer = setTimeout(() => { //判断0.4秒发一次请求
console.log("发送请求");
}, 400);
},
},
mounted() {
document.addEventListener("scroll", this.onscroll, true);
},
};
</script>
<style scoped>
.aa {
height: 2000px;
overflow: scroll;
}
</style>>
</style>
3、节流
第一次发送请求,只要没响应回来,就不能发送第二次请求
<style>
body{
height: 2000px;
}
</style>
<script>
var flag = true
window.onscroll = function(){
if(flag){
setTimeout(()=>{
console.log("Hello World")
flag = true
},500)
}
flag = false
}
</script>