函数节流与防抖防抖

函数的节流与防抖

概念

• 事件频繁触发可能造成的问题?
  • 一些浏览器事件:window.onresize、window.mousemove等，触发的频率非常高，会造成界面卡顿
  • 如果向后台发送请求，频繁触发，对服务器造成不必要的压力
• 如何限制事件处理函数频繁调用
  • 函数节流
  • 函数防抖
• 函数节流(throttle)
  • 理解:
    • 在函数需要频繁触发时: 函数执行一次后，只有大于设定的执行周期后才会执行第二次
    • 适合多次事件按时间做平均分配触发
  • 场景：
    • 窗口调整（resize）
    • 页面滚动（scroll）
    • DOM 元素的拖拽功能实现（mousemove）
    • 抢购疯狂点击（click）
• 函数防抖(debounce)
  • 理解:
    • 在函数需要频繁触发时: 在规定时间内，只让最后一次生效，前面的不生效。
    • 适合多次事件一次响应的情况
  • 场景:
    • 输入框实时搜索联想（keyup/input）

实现

防抖

function throttle(callback, wait) {
  // 定义开始时间
  let start = 0
  // 返回一个函数
  return function(event) {
    // 获取当前时间戳
    let now = Date.now()
    // 判断
    if (now - start >= wait) {
      // 若满足条件，则执行回调
      callback.call(this, event)
      // 刷新开始时间
      start = now
    }
  }
}

节流

function debounce(callback, time) {
  // 定时器变量
  let timer = null
  // 返回一个函数
  return function(event) {
    // 判断
    if (timer !== null) {
      // 清空定时器
      clearTimeout(timer)
    }
    // 启动定时器
    timer = setTimeout(() => {
      // 执行回调
      callback.call(this, event)
      // 重置定时器
      timer = null
    }, time)
  }
}

测试