防抖与节流是什么，如何优化高频事件？

防抖与节流是前端优化高频事件（如输入、滚动、缩放、拖拽）的核心策略：防抖让函数在事件“彻底停止”后才执行一次，适合搜索联想、窗口重排等需等待最终结果的场景；节流则以固定频率稳定执行，适用于滚动加载、拖拽更新等需持续响应但必须限频的交互。二者共同目标是减少冗余计算、缓解服务器压力、避免UI卡顿和重复提交——选防抖还是节流，关键就看你的需求是“等停手再响应”，还是“持续但有节奏地响应”。

防抖和节流是处理高频事件（比如 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学习网公众号，带你了解更多关于的知识点！