一文读懂前端防抖与节流：区别、应用与实现

2025-12-24 暂无评论

在前端开发中，我们经常会遇到需要处理高频触发事件的场景，比如窗口缩放、滚动加载、输入框实时搜索、按钮快速点击等。如果直接对这些高频事件绑定处理函数，会导致函数被频繁调用，不仅会占用大量浏览器资源，降低页面性能，还可能引发不必要的bug（如重复请求、多次提交）。

为了解决这个问题，防抖（Debounce）和节流（Throttle）两种经典的性能优化方案应运而生。它们的核心目标都是“限制函数的执行频率”，但实现逻辑和适用场景却截然不同。很多开发者容易将两者混淆，本文就从定义、应用场景、实现原理、核心区别四个维度，帮你彻底理清防抖与节流的差异。

一、先搞懂：什么是防抖（Debounce）？

1. 核心定义

防抖的核心逻辑是：当事件被频繁触发时，只在最后一次触发事件后，等待指定时间再执行函数。如果在等待时间内事件再次被触发，则重新计时，直到事件停止触发并等待足够时间后，函数才会执行一次。

可以用一个生活化的例子理解：给水池放水，每次打开水龙头（触发事件）后，需要等3秒水才能流出来（执行函数）；如果在3秒内再次关闭又打开水龙头（再次触发事件），则重新开始倒计时3秒；只有当你打开水龙头后，3秒内不再操作，水才会正常流出。

2. 典型应用场景

输入框实时搜索：用户在输入过程中，不需要每输入一个字符就发起请求，而是等待用户停止输入1-2秒后，再执行搜索请求，减少接口调用次数。
窗口resize事件：用户拖动窗口调整大小的过程中，事件会高频触发，防抖后只在用户停止拖动后，执行一次页面布局调整逻辑。
按钮防重复点击：避免用户快速点击按钮导致多次提交表单或发起重复请求，等待按钮点击后指定时间内无再次点击，才执行提交逻辑。

3. 简单实现（原生JS）

// 防抖函数：fn为需要防抖的函数，delay为等待时间（毫秒）
function debounce(fn, delay) {
  let timer = null; // 用于存储定时器ID
  return function(...args) {
    // 每次触发事件时，先清除之前的定时器，重新计时
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args); // 等待delay后执行函数
    }, delay);
  };
}

// 用法示例：输入框搜索
const searchInput = document.getElementById('search-input');
function handleSearch(e) {
  console.log('搜索内容：', e.target.value);
  // 此处可添加发起搜索请求的逻辑
}
// 绑定防抖后的事件处理函数，等待1000毫秒（1秒）
searchInput.addEventListener('input', debounce(handleSearch, 1000));
}

二、再理解：什么是节流（Throttle）？

1. 核心定义

节流的核心逻辑是：当事件被频繁触发时，规定函数在指定时间内只能执行一次。无论事件在这段时间内被触发多少次，都只执行一次函数；只有当指定时间结束后，下一次触发事件才会再次执行函数。

生活化例子：水滴计时器，每3秒滴一滴水（执行一次函数）；无论你如何晃动计时器，它都只会严格按照3秒的间隔滴水，不会因为晃动而加快滴水频率。

2. 典型应用场景

滚动加载更多：用户滚动页面时，事件高频触发，节流后每隔100毫秒（或其他合理时间）检查一次是否到达页面底部，避免频繁判断导致性能消耗。
鼠标移动跟踪（如拖拽元素）：跟踪鼠标位置时，不需要每帧都更新元素位置，每隔一定时间更新一次，既保证视觉流畅，又减少性能开销。
高频点击事件统计：如游戏中的射击按钮，即使玩家快速连续点击，也只能每隔固定时间发射一次子弹（执行一次射击逻辑）。

3. 简单实现（原生JS）

节流的实现有两种常见方式：时间戳版和定时器版，此处以时间戳版为例（逻辑更简洁，易于理解）：

// 节流函数：fn为需要节流的函数，interval为时间间隔（毫秒）
function throttle(fn, interval) {
  let lastTime = 0; // 记录上一次函数执行的时间戳
  return function(...args) {
    const now = Date.now(); // 获取当前时间戳
    // 若当前时间 - 上一次执行时间 > 间隔时间，则执行函数
    if (now - lastTime > interval) {
      fn.apply(this, args);
      lastTime = now; // 更新上一次执行时间为当前时间
    }
  };
}

// 用法示例：滚动加载
function handleScroll() {
  console.log('滚动位置：', window.scrollY);
  // 此处可添加判断是否到达页面底部、加载更多数据的逻辑
}
// 绑定节流后的事件处理函数，每隔200毫秒执行一次
window.addEventListener('scroll', throttle(handleScroll, 200));
}

三、核心区别：防抖 vs 节流

防抖和节流的核心目标都是“限制函数执行频率”，但两者的核心差异在于“等待时机”和“执行次数”，具体区别可总结为以下几点：

1. 执行逻辑差异

防抖：等待事件停止触发后，再执行一次函数。如果事件一直持续触发，函数永远不会执行（直到事件停止）。
节流：事件持续触发时，每隔固定时间执行一次函数。无论事件是否停止，都会按照固定频率执行函数。

2. 适用场景差异

防抖适用于：只需要关注“事件结束后”的结果的场景（如输入完成后的搜索、窗口调整后的布局）。
节流适用于：需要关注“事件过程中”的连续结果的场景（如滚动过程中的位置监测、拖拽过程中的元素跟踪）。

3. 直观对比表

对比维度	防抖（Debounce）	节流（Throttle）
核心逻辑	事件停止触发后，延迟执行一次	事件持续触发时，固定间隔执行一次
执行次数	事件频繁触发时，可能只执行一次（最后一次）	事件频繁触发时，按间隔多次执行（每隔固定时间一次）
时间依赖	依赖“事件停止后的延迟时间”	依赖“固定的时间间隔”
典型场景	输入框搜索、窗口resize、按钮防重复点击	滚动加载、鼠标移动跟踪、高频点击统计