JS实现函数防抖和节流

防抖（debounce）

防抖：触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

function debounce(fn, delay) {
  let timer = null;
  return function() {
    const args = arguments;
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(function() {
      fn(args);
    }, delay)
  }
}

函数防抖的应用场景

• 搜索框搜索输入。只需用户最后一次输入完，再发送请求
• 手机号、邮箱验证输入检测
• 窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

节流（throttle）

节流：一个函数执行一次后，只有大于设定的执行周期后才会执行第二次，节流会稀释函数的执行频率。

function throttle(fn, delay, type = 2) {
  // type: 1 时间戳版，时间段开始时执行；
  // type: 2 计时器版，时间段结束时执行（默认）
  let prevTime = 0;
  let timer = null;
  return function() {
    const args = arguments;
    if (type === 1) {
      let nowTime = Date.now();
      if (nowTime - prevTime > delay){
        fn(args);
        prevTime = nowTime;
      }
    } else {
      if (timer) return;
      timer = setTimeout(function() {
        fn(args);
        timer = null;
      }, delay);
    }
  }
}

函数节流应用场景

• DOM 元素的拖拽功能实现（mousemove）
• 搜索联想（keyup）
• 计算鼠标移动的距离（mousemove）
• Canvas 模拟画板功能（mousemove）
• 射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）
• 监听滚动事件判断是否到页面底部自动加载更多：给 scroll 加了 debounce 后，只有用户停止滚动后，才会判断是否到了页面底部；如果是 throttle 的话，只要页面滚动就会间隔一段时间判断一次