JavaScript如何实现防抖和节流_它们分别适用于什么场景

夜晨 2025-12-24 00:00:00 次阅读

防抖是“等你停手再执行”，节流是“固定节奏执行”；防抖适用于搜索建议、表单校验等需操作结束后响应的场景，节流适用于滚动加载、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;
    }
  };
}