在 JS 里实现防抖和节流处理，以优化性能

节流和防抖都可以通过 lodash 库函数使用，分别是：

• _.debounce
• _.throttle

防抖

每次触发事件的时候，立即取消上次的触发，并且开始新的等待。如果在指定时间内确实没有再触发，才会真的开始执行事件。

Tip

可以想象一直在长按某个点击按钮，但是必须停下来，才能触发第二次。

常见案例

• 输入框实时搜索（比如用户输入关键词时的接口请求）

  • 防止用户输入太快，频繁触发接口请求。

• 窗口大小变化（resize）

  • 避免用户频繁调整窗口大小时频繁触发计算逻辑。

• 按钮点击防抖（防止多次提交）

  • 避免重复提交表单。

原理实现

我自己实现的一个防抖函数，相比于 lodash 的实现，有以下特点：

• 首次调用后延迟执行
• 只是固定模式
• 没有处理参数和 this 绑定
  但是小场景也够用

function unbounce(fn, time) {
        // 对 fn 做防抖逻辑
        // fn 隔一段时间才执行，而且每次调用都取消上一次
        let timer;
        return function () {
          clearTimeout(timer);
          timer = setTimeout(fn, time);
        };
      }

节流

触发后开始执行，执行期间屏蔽一切触发，直到执行完以后才能继续触发。

Tip

可以想象一直在长按某个按钮，原本会疯了一样要多快有多快的触发，但是现在只是长按期间每隔一段时间触发一次。

常见实践

• 滚动监听（scroll）

  • 页面滚动时频繁触发的滚动事件，节流能保证每隔一段时间处理一次逻辑（比如懒加载、吸顶导航等）。

• 鼠标移动（mousemove）

  • 用于处理拖拽或绘图时减少计算量。

• 按钮点击节流（长按按钮，防止过快多次触发）

  • 例如点赞按钮，避免高频点击造成大量请求。

原理实现

我自己实现的节流函数，相比 lodash 的缺点和刚才防抖一样：

• 首次调用后延迟执行
• 只是固定模式
• 没有处理参数和 this 绑定

function throttle(fn, time) {
        let timer;
        return () => {
          if (!timer) {
            timer = setTimeout(() => {
              fn();
              timer = null;
            }, time);
          }
        };
      }