什么是防抖，什么是节流

防抖：

含义：用户触发事件过于频繁，只要最后一次事件的操作

<script>
  let inp = document.querySelector("input")
  let t
  inp.oninput = function(){
    if(t){
      clearTimeout(t)
    }
    t = setTimeout(()=>{
      console.log(this.value)
    },500)
  }
</script>

封装函数后：

<script>
  let inp = document.querySelector("input")
  inp.oninput = debunce(function(){
    console.log(this.value)
  }, 500)

  function debunce(fn, delay){
    let t = null
    return function(){
      if(t !== null){
        clearTimeout(t)
      }
      t = setTimeout(()=>{
        fn.call(this) // 修改fn() 中this的指向
      },delay)
    }
  }
</script>

节流：

含义：控制高频事件的执行次数

<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>

封装函数：

<script>
 window.onscroll = throttle(function(){
    console.log('Hello World')
  }, 500)

  function throttle(fn, delay){
    let flag = true
    return function (){
      if(flag){
        setTimeout(()=>{
          fn.call(this)
          flag = true
        },delay)
      }
      flag = false
    }
  }
<script/>

结论对比：

防抖：高频触发，只获取最后一次触发
节流：高频触发，控制执行的次数