防抖和节流是解决不同问题的两种策略：防抖适用于“等用户彻底停手再执行”，节流适用于“匀速稳定触发”；用错场景会导致卡顿或丢事件。
防抖和节流不是“选一个就好”的功能，而是解决不同问题的两种策略：防抖适用于「等用户彻底停手再执行」（比如搜索框输入），节流适用于「匀速稳定触发」（比如滚动监听）。用错场景，反而会卡顿或丢事件。
防抖函数怎么写才不漏掉最后一次调用
常见错误是只清除定时器却不处理「立即执行」逻辑。比如用户快速输入后立刻失焦，debounce 若没设 immediate 参数且没做清理，最后一次输入就白跑了。
- 必须在每次新调用时清除上一个
timeoutId，否则旧任务仍会执行 - 若需支持「首次立即执行」，要在函数内判断是否第一次触发，并跳过定时器直接执行
- 返回的包装函数应能被正常取消（暴露
cancel方法），否则测试或组件卸载时容易内存泄漏
简版实现示意：
function debounce(fn, delay, immediate = false) {
let timeoutId = null;
const debounced = function(...args) {
if (timeoutId) clearTimeout(timeoutId);
if (immediate && !timeoutId) {
fn.apply(this, args);
}
timeoutId = setTimeout(() => {
if (!immediate) fn.apply(this, args);
timeoutId = null;
}, delay);
};
debounced.cancel = () => {
if (timeoutId) clearTimeout(timeoutId);
timeoutId = null;
};
return debounced;
}节流函数为什么用时间戳比定时器更可靠
定时器节流（如用 setInterval）在高频触发下可能堆积未执行任务，尤其页面切后台再回来时，一堆定时器集中爆发。而时间戳方案靠记录上一次执行时间，每次只比对当前时间差，天然避免堆积。
立即学习“Java免费学习笔记（深入）”；
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- 时间戳节流：每次触发都检查
Date.now() - lastTime >= delay，满足才执行并更新lastTime - 定时器节流：需要维护一个
timer状态，且必须在触发时判断是否已有定时器在跑，逻辑稍重 - 注意：时间戳方案在连续超快触发下可能完全不执行（因间隔始终不够），此时应改用「leading + trailing」组合模式
推荐的时间戳+尾部补发版本：
function throttle(fn, delay) {
let lastTime = 0;
let timer = null;
return function(...args) {
const now = Date.now();
if (now - lastTime >= delay) {
fn.apply(this, args);
lastTime = now;
} else if (!timer) {
timer = setTimeout(() => {
fn.apply(this, args);
lastTime = Date.now();
timer = null;
}, delay - (now - lastTime));
}
};
}React里useCallback配合防抖/节流的坑在哪
直接把 debounce 或 throttle 包一层函数传给 useCallback，看似合理，实则危险：如果依赖项（比如 props.onSearch）变了，但防抖函数本身没重新生成，就会一直调用旧的回调。
- 不能写成
useCallback(debounce(handleSearch, 300), [])—— 因为debounce返回的是新函数，但[]让它永远不更新 - 正确做法是把防抖逻辑放进
useEffect或自定义 Hook 内，在依赖变化时重建防抖函数 - 更稳妥的是用
useRef存函数，再在useEffect中同步最新引用，避免闭包捕获过期值
简易自定义 Hook 示例：
function useDebouncedCallback(callback, delay, deps) {
const ref = useRef(callback);
useEffect(() => { ref.current = callback; }, [callback]);
return useCallback(
debounce((...args) => ref.current(...args), delay),
[delay, ...deps]
);
}什么时候该放弃封装，直接用 Lodash
项目里已引入 lodash，就别自己写防抖节流了。它的 _.debounce 和 _.throttle 支持 leading、trailing、maxWait（节流兜底）、cancel/flush 等完整控制，还做了 this 绑定和参数合并优化。
- 自己写的版本很难覆盖所有边界：比如 resize 触发时窗口反复缩放、移动端 touchmove 的毫秒级抖动、SSR 下
setTimeout不存在等 -
_.debounce的maxWait对防抖特别实用——防止用户一直输不松手，导致函数永远不执行 - 注意：Lodash 的模块化引入要精确到函数，避免全量打包，例如
import debounce from 'lodash/debounce'
真正容易被忽略的是：防抖/节流函数一旦绑定到事件上，就必须在组件卸载或元素销毁前手动 cancel，否则闭包里持有的作用域无法释放，尤其在频繁挂载/卸载的列表项中。
