在前端开发的江湖里性Neng优化始终是我们绕不开的一座大山。你是否曾经遇到过这样的尴尬时刻：页面滚动起来卡顿得像幻灯片，或者仅仅是在搜索框里输入了几个字母，后台就因为瞬间发起了几十次请求而差点崩溃？这时候，Ru果你还只是傻傻地盯着浏览器控制台发呆，那可真得补补课了。今天咱们就来深入聊聊JavaScript中解决高频事件触发的两大法宝——防抖与节流。别kan它们名字听起来差不多，实际用起来那可是有着天壤之别。

为什么我们需要它们？

想象一下你正在玩一款对操作要求极高的动作游戏。Ru果你的角色每一次挥剑dou需要向服务器发送请求确认，而你在一秒钟内狂按了十次攻击键，服务器会怎么Zuo？Ru果不加处理，服务器可Neng会被这十次请求瞬间淹没，导致响应延迟，甚至直接卡死。在Web开发中，scrollresizemousemove以及input这些事件，就像是那个狂按攻击键的玩家。它们触发频率极高，Ru果不加以限制，浏览器的主线程就会被这些繁重的回调函数占满，页面卡顿、掉帧也就随之而来。

这时候，防抖和节流就像是两位经验丰富的交通指挥官，它们通过不同的策略来疏导这些“拥堵”的事件流，确保页面Neng够流畅运行。

防抖：只有当你停下来我才开始工作

先来说说防抖。它的核心思想其实非常符合人类的某种心理——“等你冷静下来再说”。

生活中的防抖哲学

举个hen形象的例子：你在坐电梯。电梯门准备关上的时候，突然又有一个人急匆匆地跑过来按了一下开门键。电梯门不会立刻关上，而是会重新开始计时。Ru果那个人按完之后又没人来了电梯门才会真正关上。这就是防抖的逻辑：在事件被频繁触发时只有在Zui后一次触发后等待一段指定的时间没有新的触发，才真正执行函数。

再比如你在写代码时不小心把咖啡洒在了键盘上，你手忙脚乱地按了一堆键。Ru果这时候每一个按键dou触发一个系统指令，你的电脑估计早就蓝屏了。幸好，操作系统通常dou有类似的机制，只有当你停止乱按一小会儿后它才会处理你的输入。

代码实现与深度解析

让我们来kankan如何用代码实现这个“冷静期”机制。这里我们利用闭包来保存定时器的状态。

function createDebounce {
  let timeoutId = null;
  return function {
    // 保存调用时的上下文，防止this丢失
    const context = this;
    // 每次触发时先清除之前的倒计时
    // 就像电梯门要关了又有人按了键，重新计时
    if  {
      clearTimeout;
    }
    // 判断是否需要立即执行
    const callNow = immediate && !timeoutId;
    // 设置新的倒计时
    timeoutId = setTimeout => {
      timeoutId = null;
      // Ru果不是立即执行模式，时间到了才干活
      if  {
        func.apply;
      }
    }, waitTime);
    // Ru果是立即执行模式，并且当前没有正在进行的倒计时则立刻执行一次
    if  {
      func.apply;
    }
  };
}

这段代码的逻辑其实hen清晰：每次事件触发，我们dou把之前的“计划”作废，然后制定一个新的“计划”。只有当你真的停下来不再触发事件，那个Zui后的“计划”才会顺利执行。

实战场景：搜索框的智Neng联想

防抖Zui经典的应用场景就是搜索框。试想一下你在淘宝搜索“蓝牙耳机”。Ru果你每输入一个字符dou发一次请求，那不仅浪费流量，服务器压力也巨大。

使用了防抖之后逻辑就变成了：用户输入“蓝”，停顿；输入“牙”，停顿；输入“耳”，停顿……直到用户输完“蓝牙耳机”并且停下来思考，这时候我们才发起一次搜索请求。这样既节省了资源，用户体验也geng流畅。

const searchInput = document.getElementById;
// 包装一个防抖版的搜索函数，延迟设为500毫秒
const smartSearch = createDebounce {
  const keyword = e.target.value;
  console.log;
  // 这里放置你的AJAX或Fetch请求代码
}, 500);
searchInput.addEventListener;

节流：不管你怎么狂点，我按我的节奏来

说完了“佛系”的防抖，我们再来kankan“自律”的节流。Ru果说防抖是“等你停稳了再跑”，那节流就是“不管你触发多快，我每隔固定时间只跑一次”。

游戏中的技Neng冷却

还是用游戏来打比方。你在玩法师，火球术的冷却时间是3秒。哪怕你把手速练到每秒点击10次鼠标，火球术也只Neng在3秒内发射一次。这就是节流：强制函数以固定的频率执行，稀释高频触发。

Ru果我们想在滚动时实时计算位置来显示“回到顶部”按钮。Ru果不加节流，用户滚动一秒钟可Neng触发了上百次计算，这显然是浪费。我们只需要每隔一段时间计算一次就足够了人眼根本察觉不到中间的微小差异。

代码实现：时间戳与定时器的双剑合璧

节流的实现方式主要有两种：时间戳版和定时器版。为了达到Zui好的效果，我们通常会将两者结合。

function createThrottle {
  let timer = null;
  let lastExecTime = 0;
  return function {
    const context = this;
    const now = Date.now;
    const remaining = delay - ;
    // 清除可Neng存在的旧定时器
    if  {
      clearTimeout;
      timer = null;
    }
    // Ru果距离上次执行时间Yi经超过delay，立即执行
    if  {
      func.apply;
      lastExecTime = now;
    } else {
      // 否则，设置一个定时器，在剩余时间结束后执行
      // 这是为了保证Zui后一次触发也Neng被执行，不会“烂尾”
      if  {
        timer = setTimeout => {
          func.apply;
          lastExecTime = Date.now;
          timer = null;
        }, remaining);
      }
    }
  };
}

这个版本的节流函数非常健壮。它通过remaining变量计算当前时间距离下一次预定执行点还剩多少时间。Ru果时间到了立马干活；Ru果没到，就定个闹钟等着。

实战场景：滚动加载与动画

当你在刷微博或者逛电商网站时下拉到底部会自动加载geng多内容。这个“检测是否到底部”的操作Ru果放在scroll事件里就必须加上节流。

// 每隔200毫秒检查一次滚动位置
const checkScroll = createThrottle => {
  const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
  // 距离底部不到100像素时触发加载
  if  {
    console.log;
    // loadMoreData; // 你的加载数据函数
  }
}, 200);
window.addEventListener;

无论用户滚动鼠标滚轮的速度有多快，checkScroll函数dou会乖乖地每200毫秒才跑一次。这大大降低了浏览器的计算压力，让页面滚动如丝般顺滑。

深度对比：到底该选谁？

聊到这里你可Neng会觉得：“这两个功Neng听起来有点像啊，dou是减少执行次数。” 没错，它们的目的相同，但执行时机和适用场景却大相径庭。我们Ke以从以下几个维度来区分它们：

1. 执行时机不同

防抖是在停止触发后执行。Ru果你一直不停地触发，它就永远不会执行。它追求的是“Zui终结果”。

节流是在固定间隔执行。不管你触发多少次它dou会按照既定的节奏来执行。它追求的是“过程采样”。

2. 执行次数不同

假设我们在1秒内疯狂触发了10次事件，延迟设为250毫秒：

防抖可Neng只执行了1次。

节流会执行4次，均匀分布在这一秒内。

3. 选择策略

怎么选？其实hen简单，问自己一个问题：我是关心“Zui后一次”的状态，还是关心“整个过程”的流畅度？

Ru果你只想要Zui后的结果，用防抖。

你需要持续响应，但又不想太频繁，用节流。

进阶思考：不仅仅是性Neng优化

hen多初学者觉得防抖和节流只是为了“省流量”或者“防卡顿”。其实它们geng深层次的意义在于控制业务逻辑的合理性。

拿“点击提交按钮”来说用户因为网络慢，连续点了五次“提交订单”。Ru果没有防抖，后端可Neng会收到五条订单数据，这可是严重的业务事故。这时候，给提交按钮加上防抖，就Neng从源头上拦截掉这种重复操作，保证数据的准确性。

再比如window.onresize事件，我们需要在窗口大小改变后重新计算布局。Ru果用防抖，用户拖动窗口边缘时布局会乱七八糟，只有停下来才会瞬间变好；Ru果用节流，布局会随着拖动“有节奏”地调整，kan起来会geng高级一些。这时候，选择哪种技术，取决于你想要什么样的交互体验。

JavaScript的防抖与节流，虽然只是两个小小的函数技巧，却蕴含着极大的智慧。它们教会我们如何在有限的资源下通过合理的策略来处理无限的输入。

不要小kan这些细节。正是这些对性Neng的极致追求，对用户体验的反复打磨，才区分出了普通的代码搬运工和真正的高级前端工程师。下次当你再面对scroll或者input事件时记得冷静思考一下：我是该让它们“冷静下来”，还是让它们“按部就班”？

希望这篇文章Neng帮你彻底搞懂这两个概念。代码之路漫漫，愿你我douNeng写出geng优雅、geng高效的程序。Ru果你觉得这篇文章对你有帮助，不妨收藏起来下次写代码的时候拿出来翻一翻，说不定Neng帮你省下不少调试Bug的时间呢！

---