JavaScript 闭包实战：手写防抖与节流函数，优化高频事件性能

在前端开发中，我们经常会遇到高频触发的事件，比如：

输入框 keyup 时的搜索建议（类似百度、VS Code 的智能补全）
窗口 resize 时的布局重新计算
页面滚动时的懒加载或返回顶部按钮显示
鼠标 mousemove 时的拖拽预览

这些事件往往在短时间内被触发数百甚至上千次，如果每次都直接执行复杂的逻辑（如发 AJAX 请求、操作 DOM、计算布局），会严重消耗浏览器资源，导致页面卡顿、掉帧，甚至崩溃。

解决这类问题的核心方案就是函数防抖（debounce）和函数节流（throttle） ，而它们的实现都离不开 JavaScript 的灵魂特性------闭包。

本文将从实际场景出发，详细讲解防抖和节流的原理、区别、手动实现，并提供完整可运行的 HTML 示例，帮助你彻底掌握这一前端性能优化的必备技能。

什么是闭包？为什么能用于防抖节流？

闭包是指函数能够"记住"并访问其词法作用域中的变量，即使函数在外部作用域之外执行。

在防抖和节流中，我们需要：

保存定时器 ID（用于清除或判断时间）
记住上一次执行的时间戳
保留正确的 this 指向和参数

这些变量必须在多次事件触发间"存活"下来，而不能每次都重新创建------这正是闭包的用武之地。

场景一：搜索输入框的 AJAX 请求优化

用户在搜索框输入关键词时，我们希望实时显示搜索建议（如百度输入"react"时下方出现的建议列表）。

如果不做任何处理，每次 keyup 都立即发送请求：

用户输入"react"五个字符 → 触发 5 次请求
网络开销大、服务器压力大
用户体验差（快速输入时建议闪烁）

理想效果是：用户停止输入 500ms 后，才发送一次请求。

这正是防抖的典型应用场景。

函数防抖（debounce）原理与实现

防抖的核心思想：不管事件触发多少次，我只关心最后一次。在最后一次触发后的 delay 时间内如果没有新触发，才真正执行函数。

JavaScript

javascript 复制代码

function debounce(fn, delay) {
  let timer = null; // 闭包中保存定时器 ID

  return function(...args) {
    const context = this;

    // 每次触发时，先清除上一次的定时器
    if (timer) {
      clearTimeout(timer);
    }

    // 重新设置定时器
    timer = setTimeout(() => {
      fn.apply(context, args);
      timer = null; // 执行完可可选清理
    }, delay);
  };
}

关键点解析：

timer 变量定义在 debounce 函数作用域中，被返回的函数"记住"（闭包）。
每次事件触发都清除旧定时器，重新开始倒计时。
只有在 delay 时间内没有新触发时，定时器才会执行 fn。
使用 apply 保留正确的 this 和参数。

函数节流（throttle）原理与实现

节流的核心思想：在规定时间内，无论触发多少次，只执行一次。常用于限制执行频率。

典型场景：页面滚动时加载更多内容（scroll 事件），我们希望每 500ms 最多检查一次是否到达底部。

JavaScript

ini 复制代码

function throttle(fn, delay) {
  let last = 0; // 闭包中记录上次执行时间

  return function(...args) {
    const context = this;
    const now = Date.now();

    // 如果距离上次执行不足 delay，则不执行
    if (now - last < delay) {
      return;
    }

    // 执行并更新 last
    last = now;
    fn.apply(context, args);
  };
}

更常见的时间戳 + 定时器混合版（支持尾部执行）：

JavaScript

ini 复制代码

function throttle(fn, delay) {
  let last = 0;
  let timer = null;

  return function(...args) {
    const context = this;
    const now = Date.now();

    // 如果还在冷却期，且没有定时器（避免重复设置）
    if (now - last < delay) {
      clearTimeout(timer);
      timer = setTimeout(() => {
        last = now;
        fn.apply(context, args);
      }, delay);
    } else {
      // 立即执行（领先执行）
      last = now;
      fn.apply(context, args);
    }
  };
}

这种实现兼顾了"固定频率执行"和"停止触发后仍能执行最后一次"。

防抖 vs 节流：如何选择？

特性	防抖 (debounce)	节流 (throttle)
执行时机	事件停止触发后 delay 时间执行一次	每隔 delay 时间执行一次
典型场景	搜索输入、表单提交验证	滚动加载、鼠标跟随、射击游戏射速
用户体验	等待用户"想好了"再响应	持续操作时保持流畅响应
实现复杂度	相对简单（setTimeout）	稍复杂（时间戳或定时器混合）

记忆口诀：

需要"最后一次"执行 → 用防抖（如搜索）
需要"持续但限频"执行 → 用节流（如滚动）

完整可运行示例

下面是一个完整的 HTML 文件，包含三个输入框：

第一个：无优化，每次 keyup 都发请求
第二个：防抖优化，停止输入 500ms 后发一次请求
第三个：节流优化，每 500ms 最多发一次请求

HTML

xml 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>防抖与节流演示</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; }
    input { display: block; margin: 20px 0; padding: 10px; width: 300px; font-size: 16px; }
    label { font-weight: bold; }
  </style>
</head>
<body>
  <div>
    <label>无优化（每次输入都请求）</label>
    <input type="text" id="undebounce" placeholder="快速输入观察控制台" />

    <label>防抖（停止输入500ms后请求）</label>
    <input type="text" id="debounce" placeholder="输入完成后才会请求" />

    <label>节流（每500ms最多请求一次）</label>
    <input type="text" id="throttle" placeholder="持续输入时会定期请求" />
  </div>

  <script>
    function ajax(content) {
      console.log('ajax request:', content);
    }

    // 防抖实现
    function debounce(fn, delay) {
      let timer = null;
      return function(...args) {
        const context = this;
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
          fn.apply(context, args);
        }, delay);
      };
    }

    // 节流实现（时间戳 + 定时器混合版）
    function throttle(fn, delay) {
      let last = 0;
      let timer = null;
      return function(...args) {
        const context = this;
        const now = Date.now();
        if (now - last < delay) {
          clearTimeout(timer);
          timer = setTimeout(() => {
            last = now;
            fn.apply(context, args);
          }, delay);
        } else {
          last = now;
          fn.apply(context, args);
        }
      };
    }

    const inputA = document.getElementById('undebounce');
    const inputB = document.getElementById('debounce');
    const inputC = document.getElementById('throttle');

    const debouncedAjax = debounce(ajax, 500);
    const throttledAjax = throttle(ajax, 500);

    inputA.addEventListener('keyup', function(e) {
      ajax(e.target.value);
    });

    inputB.addEventListener('keyup', function(e) {
      debouncedAjax(e.target.value);
    });

    inputC.addEventListener('keyup', function(e) {
      throttledAjax(e.target.value);
    });
  </script>
</body>
</html>

打开浏览器控制台，分别在三个输入框快速输入，你会清晰看到三者的巨大差异。

现代框架中的应用

虽然原生 JS 需要手写，但现代框架/库已内置：

Lodash：_.debounce(fn, wait) 和 _.throttle(fn, wait)
Vue：@input.debounce="500ms"
React：可配合 useCallback + useRef 实现，或使用第三方如 use-debounce

但理解底层原理，能让你在复杂场景下自定义行为（如立即执行选项、取消功能等）。

最佳实践建议

搜索输入 → 防抖（节约资源，用户输入完成后响应）
滚动事件 → 节流（保持流畅）
按钮防止重复点击 → 防抖（delay 设为 1000ms）
resize/scroll 计算复杂布局 → 节流
拖拽过程中实时预览 → 节流

结语

闭包是 JavaScript 最强大的特性之一，而防抖和节流则是它在性能优化领域最经典的应用体现。

通过合理使用防抖和节流，我们可以：

大幅减少不必要的网络请求和计算
提升页面响应速度和流畅度
改善用户体验
降低服务器压力

无论你是面试被问"手写防抖节流"，还是实际项目中遇到卡顿问题，这两个函数都是你工具箱中不可或缺的利器。

建议立即复制上面的完整示例到本地运行，亲身体验三者的差异------理论结合实践，你才能真正掌握。

前端性能优化，从理解闭包开始，从手写防抖节流起步。愿你的页面永远丝滑流畅！