防抖与节流函数实现原理_在实际项目中的正确应用-js教程-PHP中文网

防抖与节流函数实现原理_在实际项目中的正确应用

狼影

发布： 2025-12-05 21:05:02

原创

426人浏览过

防抖和节流用于控制函数执行频率。防抖通过延迟执行，确保事件连续触发后仅执行一次，适用于搜索框输入等场景；节流通过时间间隔控制，保证单位时间内最多执行一次，适合滚动加载、按钮防重等高频事件处理。

防抖与节流函数实现原理_在实际项目中的正确应用

在前端开发中，用户频繁触发事件（如窗口滚动、输入框输入、按钮点击）可能导致性能问题。防抖（Debounce）和节流（Throttle）是两种常用的技术手段，用于控制函数的执行频率，提升页面响应速度与用户体验。

防抖函数实现原理

防抖的核心思想是：当事件被触发时，设置一个延迟执行的定时器，如果在该延迟时间内事件再次被触发，则清除之前的定时器并重新计时。只有在连续触发结束后，目标函数才会真正执行一次。

适用于搜索框自动补全、表单验证、窗口大小调整等场景。

简单实现：

function debounce(func, wait) {
  let timeout;
  return function (...args) {
    const context = this;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), wait);
  };
}

登录后复制

例如，在输入框监听 input 事件时使用防抖，可以避免每次输入都发起请求，仅在用户停止输入后才调用搜索接口。

节流函数实现原理

节流的策略是：无论事件触发多频繁，保证函数在指定时间间隔内最多执行一次。它有两种常见方式：使用时间戳或定时器实现。

适合处理高频触发且需要规律执行的场景，比如页面滚动加载、按钮防止重复提交、鼠标移动事件等。

TabTab AI

首个全链路 Data Agent，让数据搜集、处理到深度分析一步到位。

279

查看详情

基于时间戳的实现：

function throttle(func, delay) {
  let prevTime = 0;
  return function (...args) {
    const now = Date.now();
    const context = this;
    if (now - prevTime >= delay) {
      func.apply(context, args);
      prevTime = now;
    }
  };
}

登录后复制

这种方式会立即执行第一次，之后每隔 delay 时间执行一次。