js防抖和节流

一、防抖

• 定义：防抖就是指触发事件后等待 n 秒后再执行函数，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。简单来说就是将多次执行变成最后一次执行。
• 实现思路：每次触发事件时都取消之前的延时调用方法，然后新建一个延时调用方法。
• demo如下：

<input type="text">
<script>
    let inp=document.querySelector("input");
    let timeout=null;//定时器
    inp.oninput=function(){
      // 如果发生输入事件，那么就先清除以前的定时器
       if(timeout!=null){
         clearTimeout(timeout)
       }
       // 然后新建一个定时器。这样就会只保留最后一个定时器，如果过了0.5秒没有发生新的输入事件，就会执行定时器中的代码。
       timeout=setTimeout(()=>{
         console.log(this.value)//this指向的是inp。setTimeout会将this指向window，但是箭头函数会将`this`指向父级。
       },500)
    }
</script>

二、节流

• 定义：节流就是指连续触发事件但是在 n 秒中只执行一次函数，从而稀释函数的执行频率。简单来说就是将多次执行变成每隔一段时间执行。
• 实现思路：每次触发事件时都判断当前是否有等待执行的延时函数。如果有，就不执行函数，如果没有，就执行函数。
• demo如下：

<style>
  body{
    height: 3000px;
  }
</style>
<script>
     let flag=true;
    // 监听页面滚动
    window.onscroll=function(){
      if(flag){
        setTimeout(()=>{
          console.log("节流");
          flag=true;
        },5000)
      }
      flag=false;
    }
</script>

三、两者共同点和不同点

• 两者共同点：都可以减少函数的执行次数。
• 两者区别：
  1. 目的不同：防抖是将多次执行变为最后一次执行。节流是将多次执行变成每隔一段时间执行。
  2. 实现思路不同：防抖是每次触发事件时都取消之前的延时调用方法。节流是每次触发事件时都判断当前是否有等待执行的延时函数。
  3. 使用场景不同：
     • 防抖
       场景1： 比如监听input输入事件，输入的过程不想请求接口，输入完成后再请求查询接口。
     • 节流
       场景1：比如一个页面内容太多需要使用懒加载的时候，就可以使用节流。因为懒加载需要监听计算滚动条的位置，但不是每次滑动都需要触发，可以使用节流降低计算的频率。
       场景2：鼠标连续不断地触发某事件（如点击），在单位时间内只触发一次。比如类似于秒杀的这种活动，用户可能会连续不断的点击按钮，这个时候可以使用节流，在单位时间内只请求一次接口。