节流和防抖应分层协同使用：过程反馈用节流保流畅，最终结果用防抖保精准；同一事件可绑定两个独立监听器，需注意清理定时器防内存泄漏。
节流和防抖不是非此即彼的选择，而是可以按需组合使用的协同策略。面对复杂交互（比如带搜索的可滚动列表、拖拽中实时预览+松手后提交），单一手段往往力不从心。关键在于分层控制：对“过程反馈”用节流保流畅，对“最终结果”用防抖保精准。
先分清事件流的两个阶段
很多高频交互天然包含「持续动作」和「终止信号」两个部分：
- 滚动加载 + 输入搜索：滚动是持续过程（适合节流），而用户停下输入后触发搜索是终止行为（适合防抖）
- 画布拖拽 + 松手保存：拖动中要实时更新坐标（节流控制帧率），松手瞬间才真正落位并存档（防抖防误触）
- 调整窗口大小 + 布局重排：resize 过程中只需每 100ms 更新一次视口计算（节流），但最终尺寸稳定后才触发响应式组件重渲染（防抖）
组合写法：一个事件绑定两个处理函数
不要强行塞进同一个函数里。更清晰的做法是为同一事件注册职责分离的监听器：
- 给 scroll 同时绑定节流版位置监听（用于显示“正在加载”提示）和防抖版临界检测（用于真正发起下一页请求）
- 给 input 绑定节流版输入长度校验（实时标红/绿提示），再绑定防抖版搜索请求（只在停顿后发）
- 代码上就是两次 addEventListener，各自使用独立封装的 throttle 或 debounce 实例，互不干扰
注意执行上下文与清理时机
组合使用时内存泄漏风险更高：
立即学习“Java免费学习笔记（深入）”；
- 节流函数内部的时间戳或定时器，防抖函数里的 timeout ID，都要确保在组件卸载或事件解绑时清除
- React 中推荐在 useEffect 清理函数里调用对应的 cancel 方法（如果封装了 cancel 接口），或直接保存返回的函数引用并 clearTimeout/clearInterval
- 避免在节流/防抖闭包中引用大型对象（如整个 state 或 ref），防止意外延长生命周期
真实场景示例：搜索框 + 滚动加载混合交互
用户在搜索框输入关键词，同时页面滚动加载匹配结果：
- 输入事件 → 防抖 400ms 触发 fetchSearch(query)，保证只搜最终词
- 滚动事件 → 节流 160ms 触发 checkIfNearBottom()，平滑检测是否该加载
- 两者共用同一个 loading 状态，但触发逻辑完全解耦，不会互相阻塞或覆盖
- 若搜索结果返回后滚动到底部，节流函数仍能正常工作——它不依赖搜索状态
