关于节流防抖的理解

本文仅简单记录自己观点

节流防抖面试被问了无数遍，这次简单记录下

 防抖（debounce）

防抖也就是说，一个事件在一定的时间内再次触发，则重新计时，只有再次超过一定时间，才会执行下一次

应用场景：

1.input表单输入时，提示文本的出现（如果用户输入时超过一定时间，则发送http请求，去获取关键词的提示信息）

2.获取加载后的图片宽度，防止多次加载图片一直调整dom结构

3.文本保存的实时保存

源码实现

  <button id="btn">防抖请求</button>
  <script>
    let btn = document.querySelector('#btn')
    function debounce(func, time = 2000) { //需要执行的方法和执行时间
      let timer = null
      return function(...args) {
        if(timer) {
          clearTimeout(timer) //如果存在该计时器则清除
          timer = null //释放内存
        }
        timer = setTimeout(() => { //从新计时
          func.apply(this, args) //执行函数并且传入参数
          timer = null  //执行后释放内存
        }, time)
      }
    }
    let logdebounce = debounce((params) => { //要执行函数
      console.log('防抖操作'); 
      console.log(params); //20
    })
    btn.addEventListener('click', () => {
      logdebounce(20)
    })
  </script>

其实就是不断给timer赋值给新的计时器，但是之前的time内的计时器要清除掉。

节流（throttle）

节流也就是说，在规定的事件内，事件只触发一次

应用场景

1.玩游戏时，频繁点击攻击，但是也是一秒攻击一次

2.老版服务器间隔固定的时间发送一次更新请求

源码实现

<button id="btn">节流请求</button>
  <script>
    let btn = document.querySelector('#btn')
    function throttle(func, time = 2000) {
      let timer = null 
      return function(...args) {
        if(!timer) {     //只有timer为null的时候才会开启
          timer = setTimeout(() => { //相当于关闭阀门
            func.apply(this, args)
            timer = null   //释放内存
          }, time)         
        }
      }
    }
    let logthrottle = throttle(() => {
      console.log('节流函数')
    })
    btn.addEventListener('click', () => {
      logthrottle()
    })
  </script>

其实就相当于有一个阀门，开始进入时，开启计时器，关闭阀门，到达规定时间打开阀门，重新接受请求（当然你可以赋给阀门true，打开时用false，情况不唯一）

最后说一下区别

区别

函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。