节流与防抖

一、为什么要有节流与防抖

• 事件频繁触发可能造成的问题?

  • 一些浏览器事件:window.onresize、window.mousemove等，触发的频率非常高，会造成界面卡顿
  • 如果向后台发送请求，频繁触发，对服务器造成不必要的压力

• 如何限制事件处理函数频繁调用?

  • 函数节流
  • 函数防抖

二、理解节流与防抖

2.1 节流

理解:
在函数需要频繁触发时: 函数执行一次后，只有大于设定的执行周期后才会执行第二次（可以理解为游戏中的技能冷却）

应用场景:

窗口调整、页面滚动、DOM 元素的拖拽功能实现、抢购疯狂点击

2.2 防抖

理解:
在函数需要频繁触发时: 函数执行一次后，只有大于设定的执行周期后才会执行第二次（可以理解为游戏中的回城）

应用场景:
搜索页面

2.3 区别节流与防抖

三、节流与防抖的实现

3.1 节流

  <div class="box" style="  background-color: aqua;width: 500px;height: 500px;"></div>
  let box = document.querySelector(".box")
  // touchmove 仅在移动端(触摸屏生效)
  box.addEventListener("touchmove", throttle(getGoods, 2000))
  // 封装节流
  function throttle(event, time) {
      let timer = null;
      return () => {
        if (!timer) {
          timer = setTimeout(() => {
            event();
            timer = null
          }, time)
        }
     }
  }
  // 模拟发送请求
  function getGoods() {
      console.log("发送请求");
  }

3.2 防抖

  <input type="text" placeholder="请输入要搜索的商品名称">
  //固定时间内只有一次操作
  let goodsInput = document.querySelector('input');
  goodsInput.addEventListener('input', debounce(getGoods, 2000))
    // 封装防抖
    // 参数一:调用的方法
    // 参数二:等待的时间
    function debounce(fn, wait) {
      let timeOut = null;
      // 闭包
      return args => {
        if (timeOut) clearTimeout(timeOut)
        timeOut = setTimeout(fn, wait)
      }
    }
    // 模拟数据请求的方法
    function getGoods() {
      console.log("发送请求");
    }