关于节流防抖

关于节流防抖

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>