防抖只执行最后一次操作，节流按固定频率执行；防抖适用于搜索输入、表单校验等需等待用户完成的场景，节流适用于滚动加载、拖拽响应等需持续但限频的场景。
防抖（Debounce）和节流（Throttle）是 JavaScript 中用来控制高频事件（比如 resize、scroll、input、mousemove）触发频率的两种常用优化策略，核心目标是减少不必要的函数执行，提升性能、避免卡顿或接口滥用。
防抖：只响应最后一次操作
防抖的逻辑是——当事件连续触发时，不立即执行，而是等待“停顿”一段时间（比如 300ms），如果期间又触发了，就重新计时；只有真正“安静”下来后，才执行一次函数。
- 适合场景：搜索框输入联想、窗口大小校验后重排版、表单验证（用户输完再校验）
- 关键点：每次新触发都会清除前一个定时器，确保只执行最后一次
- 简单实现：
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
节流：固定频率执行，不放过中间过程
节流的逻辑是——无论事件多么频繁，函数最多每隔一定时间（比如 100ms）执行一次，保证节奏可控，不会完全丢弃中间状态。
- 适合场景：滚动加载、鼠标拖拽位置更新、canvas 绘图实时响应
- 关键点：用时间戳或定时器控制“是否允许执行”，不是清空重来
- 时间戳版实现（推荐）：
let lastCall = 0;
return function (...args) {
const now = Date.now();
if (now - lastCall >= limit) {
fn.apply(this, args);
lastCall = now;
}
};
}
怎么选？看你的需求重点
- 要等用户“做完再说” → 选防抖（比如搜索、提交前校验）
- 要持续响应但不能太密 → 选节流（比如滚动监听、实时绘图）
- 注意 this 和参数：封装时用 apply 或 call 保持上下文正确
- 实际项目中可直接用 Lodash 的 _.debounce 和 _.throttle，支持取消、立即执行等扩展选项
小提醒：别忘了清理
在组件卸载或监听器移除时（比如 React useEffect 清理、或 removeEventListener 前），记得清除防抖/节流内部的定时器或引用，避免内存泄漏或报错。
立即学习“Java免费学习笔记（深入）”；
基本上就这些。不复杂，但容易忽略——尤其在写 input 搜索或 scroll 懒加载时，加一层防抖或节流，页面立刻更顺滑。
