防抖与节流：优化高频事件的两大利器

防抖与节流是前端优化高频事件（如输入、滚动、缩放、拖拽）的两大核心策略：防抖让函数在事件“彻底停止”后才执行一次，适合搜索、校验、重布局等需等待最终结果的场景；节流则以固定频率稳定执行，确保持续响应又不超负荷，适用于滚动加载、拖拽更新等需实时反馈但忌过度计算的场合。二者本质都是通过控制执行节奏来节省资源、提升性能、避免卡顿和重复请求——选对策略，往往比写更多代码更能带来流畅体验。

防抖和节流是处理高频事件（比如 input、scroll、resize、mousemove）时常用的两种函数控制策略，核心目标是减少不必要的函数执行次数，从而节省计算资源、降低服务器压力、避免 UI 卡顿或重复提交等问题。

防抖（Debounce）：等“静下来”再行动

防抖的逻辑是：每次事件触发，都重置一个倒计时；只有当事件停止触发、且倒计时走完，函数才执行一次。就像电梯关门——只要有人进出，就重新计时，直到没人动了，才关门运行。

• 适合场景：用户输入搜索、表单实时校验、窗口缩放后重排布局
• 关键特点：只响应最后一次操作，中间所有触发都被忽略
• 简单实现要点：用 setTimeout + clearTimeout 管理定时器，每次调用前先清除旧定时器

节流（Throttle）：固定节奏，稳住频率

节流的逻辑是：无论事件多频繁，函数最多每隔固定时间执行一次。就像公交发车——到点就走，不管上车人数多少、是否还有人跑来，下趟车要等下个整点。

• 适合场景：滚动加载更多、拖拽位置更新、鼠标移动距离计算、Canvas 绘图
• 关键特点：保证执行有节奏，不堆积也不遗漏太远，通常首次触发立即执行
• 简单实现要点：可用时间戳比对（如 Date.now()）或开关标记（inThrottle）控制执行时机

怎么选？看你的需求节奏

如果希望“等用户彻底停手再响应”，选防抖；如果希望“持续响应但别太密”，选节流。

• 搜索框输入建议 → 防抖（避免边打字边请求）
• 滚动到底部加载新内容 → 节流（防止快速滚动时反复触发加载）
• 调整浏览器窗口大小 → 防抖（只需最终尺寸，不用中间过程）
• 鼠标拖拽元素 → 节流（需持续更新位置，但不必每像素都算）

小提醒：别漏掉 this 和参数绑定

手写时容易忽略上下文丢失问题。实际使用中，推荐在返回函数里用 func.apply(this, arguments) 或更现代的 func.call(this, ...args) 保证原函数能正确访问 this 和传入参数。也可以配合 bind 或箭头函数进一步封装，但要注意闭包与内存释放。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《防抖与节流：优化高频事件的两大利器》文章吧，也可关注golang学习网公众号了解相关技术文章。