防抖与节流应分层协同而非叠加使用：输入用防抖、按钮用“立即执行+防抖”+节流兜底、滚动检测用节流、曝光上报用防抖、深度上报融合节流与防抖、拖拽用节流、渲染用防抖、保存用节流兜底+防抖触发，需避免逻辑冲突、内存泄漏及上下文丢失。
在复杂业务场景中，防抖与节流不是非此即彼的选择，而是可以按需协同使用的策略组合。关键不在于“同时用”，而在于“分层控制”——对同一事件流的不同阶段、不同粒度施加不同限制。
搜索框 + 实时联想 + 防重复提交
典型场景：用户在搜索框输入关键词，触发后端联想建议（防抖），同时点击“搜索”按钮提交（节流+防抖）。
- 输入事件（input）用防抖：等待用户停顿 300ms 后请求联想，避免每输一个字都发请求
- 搜索按钮（click）用“立即执行 + 防抖”：首次点击立刻提交，300ms 内重复点击不响应（防止手抖连点）
- 提交成功后加节流兜底：若按钮未禁用，可额外加一层 1.5s 节流，确保两次提交至少间隔 1.5 秒
滚动加载 + 视口检测 + 上报埋点
页面无限滚动时，既要加载新内容，又要统计用户停留行为，还要上报滚动深度。
- 滚动触底检测用节流（时间戳版）：每 200ms 最多检查一次是否接近底部，避免 scroll 事件密集触发导致卡顿
- 视口内元素曝光上报用防抖：某商品卡片进入视口后，延迟 100ms 上报；若用户快速滚动，只报最后一次进入的卡片
- 滚动深度百分比上报用节流 + 防抖融合：每 500ms 上报一次当前滚动比例（节流），但离开页面前强制上报最终值（防抖的 trailing 行为）
拖拽缩放画布 + 实时渲染 + 快照保存
类似 Figma 或白板类应用，用户持续拖拽、缩放、绘制，需平衡交互流畅性与计算开销。
立即学习“Java免费学习笔记（深入）”；
- 鼠标移动（mousemove）用节流（16ms 或 60fps）：保证拖拽跟手，每帧最多更新一次坐标和缩放状态
- 画布重绘（render）用防抖（100ms）：拖拽/缩放过程中暂不渲染，等操作暂停后再批量更新 DOM 或 Canvas
- 自动保存快照用“节流兜底 + 防抖触发”：每 3 秒节流触发一次保存检查；若用户刚完成一次复杂操作（如插入大图），再额外加一次防抖延迟保存（500ms 后），避免覆盖中途中断
注意事项：避免组合陷阱
组合不是叠加，而是分责。常见错误包括：
- 对同一个事件既套防抖又套节流——逻辑冲突，结果不可控
- 防抖函数内部再调用节流函数——闭包嵌套深、清理困难，易内存泄漏
- 忽略 this 和参数传递：组合时必须用 apply/call 或箭头函数绑定上下文，否则事件源丢失
- 组件卸载时不清理：React/Vue 中需在 unmount 时 clearTimeout 或取消节流标记，尤其防抖定时器容易滞留
