防抖与节流函数原理及应用解析

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《防抖与节流函数原理详解》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

防抖确保连续触发后只执行最后一次，适用于搜索框输入等场景；节流则按固定间隔执行，适合滚动监听等高频事件，二者均用于优化性能。

在处理高频触发事件时，比如窗口滚动、输入框输入、鼠标移动等，直接执行回调会带来性能问题。为了优化这类场景，函数防抖（Debounce）和节流（Throttle）是两种常用的技术手段。它们的核心目标是控制函数的执行频率，但实现原理和使用场景有所不同。

函数防抖（Debounce）原理

防抖的逻辑是：当事件被触发后，设置一个延迟执行的定时器；如果在延迟时间内事件再次被触发，就清除之前的定时器，重新开始计时。只有在连续触发结束后，过了指定等待时间还没有新触发，才会真正执行函数。

简单来说，防抖确保函数在一系列连续触发中只执行最后一次。

常见应用场景：搜索框输入联想、表单验证、按钮重复点击防护。

• 用户在搜索框打字，每输入一个字符都会触发 input 事件。
• 使用防抖后，只有用户停止输入超过设定时间（如300ms），才发送请求获取搜索建议。
• 这样避免了每次输入都发请求，节省资源。

• 维护一个定时器变量。
• 每次触发函数时，先清除旧定时器。
• 重新设置新定时器，延迟执行目标函数。

节流（Throttle）原理

节流的逻辑是：规定一个单位时间，在这个时间内最多只执行一次函数。无论触发多少次，函数都按固定间隔执行。

换句话说，节流是“稀释”执行频率，让函数按照一定节奏执行，而不是频繁响应每一次触发。

典型应用：窗口滚动监听、屏幕resize、游戏中的按键频率限制。

• 页面滚动时要更新元素位置或判断是否进入视口。
• 如果不节流，scroll事件可能每秒触发几十甚至上百次。
• 使用节流设为100ms执行一次，就能大幅降低计算压力，同时保证体验流畅。

• 时间戳方式：记录上次执行时间，每次触发时对比当前时间与上次执行时间的差值，超过指定间隔才执行。
• 定时器方式：设置一个定时器，若没有运行则启动，期间新触发会被忽略，直到定时结束才允许下一次执行。

代码实现示意（JavaScript）

以下是简易版的防抖和节流实现，便于理解原理。

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

function throttle(func, wait) {
  let timeout;
  return function(...args) {
    const context = this;
    if (!timeout) {
      timeout = setTimeout(() => {
        timeout = null;
        func.apply(context, args);
      }, wait);
    }
  };
}

基本上就这些。理解防抖和节流的关键在于区分“最后一次执行”和“定期执行”的需求。根据具体场景选择合适的方式，能有效提升前端性能和用户体验。

今天关于《防抖与节流函数原理及应用解析》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！