17370845950

防抖是“等你停手再执行”，节流是“固定节奏执行”；防抖适用于搜索建议、表单校验等需操作结束后响应的场景，节流适用于滚动加载、resize适配等需持续但限频响应的场景。

防抖（Debounce）和节流（Throttle）是前端处理高频事件的两种经典策略，核心区别在于：防抖是“等你停手再执行”，节流是“固定节奏执行”。选错会导致交互卡顿或逻辑失效，比如搜索框输入、窗口缩放、滚动加载等场景，必须按需选用。

防抖：只响应最后一次操作

防抖函数会忽略前面所有触发，只在最后一次调用后等待指定延迟时间，若期间再次触发则重新计时。适合需要“用户操作结束才响应”的场景。

• 典型适用场景：实时搜索建议、表单输入校验、按钮重复点击防护
• 实现要点：每次调用先清除已有定时器，再新建一个；闭包保存 timer 引用
• 简单实现：

  function debounce(fn, delay) {
    let timer;
    return function(...args) {
      clearTimeout(timer);
      timer = setTimeout(() => fn.apply(this, args), delay);
    };
  }

节流：控制执行频率上限

节流保证函数在单位时间内最多执行一次，无论触发多少次。适合需要“持续响应但不能太密”的场景，比如滚动监听、鼠标移动追踪。

• 典型适用场景：无限滚动加载、canvas 绘图响应、resize 适配
• 实现要点：记录上次执行时间，每次触发时判断是否超过间隔；或用定时器“预约下一次执行”
• 时间戳版（推荐）：

  function throttle(fn, limit) {
    let lastTime = 0;
    return function(...args) {
      const now = Date.now();
      if (now - lastTime >= limit) {
        fn.apply(this, args);
        lastTime = now;
      }
    };
  }

怎么选？看用户行为意图

关键不是技术多酷，而是匹配真实交互逻辑：

• 用户输入后想等他打完字再查（如搜索框），用防抖
• 用户滚动页面想实时更新吸顶状态或加载更多，用节流
• 按钮提交防止误点，用防抖（delay 设为 300ms 左右）
• 拖拽过程中要持续获取坐标，但不需要每毫秒都算，用节流（limit 设为 16ms 或 50ms）

小提醒：别忘了 this 和参数绑定

实际使用中，防抖/节流函数返回的是新函数，容易丢失原始调用上下文。建议：

• 用 fn.apply(this, args) 正确传递 this 和参数
• 或用箭头函数 + 显式 bind，但更推荐 apply 方式
• 现代项目可直接用 Lodash 的 _.debounce 和 _.throttle，它们已处理好边界情况（如取消、立即执行选项等）