防抖适用于高频输入类操作，节流适用于滚动等阶段性响应场景；防抖需闭包保存timer并提供cancel方法，节流推荐时间戳实现以避免漏调；Lodash需注意this绑定和实现差异，且二者均不解决异步竞态问题。
防抖和节流不是“要不要用”的选择题，而是“哪个更适合当前场景”的判断题。直接结论：高频触发的输入类操作（如搜索框 input）优先用防抖；滚动、鼠标移动等需要阶段性响应的场景（如懒加载、吸顶导航）更适合节流。
防抖（debounce）怎么写才不丢最后一次调用
常见错误是把定时器 timer 声明在函数内部却没返回清除方法，导致无法手动取消；或忽略立即执行模式（leading edge），在某些交互中造成响应延迟感。
实操建议：
- 用闭包保存
timer，每次触发先clearTimeout(timer)，再新建定时器 - 支持
immediate参数：为true时首次触发立即执行，后续触发重置计时（适合按钮点击防重复提交） - 返回一个可取消的函数，暴露
cancel()方法，便于组件卸载时清理（React 中 useEffect cleanup 很常用）
function debounce(func, wait, immediate = false) {
let timer;
const debounced = function(...args) {
const later = () => {
timer = null;
if (!immediate) func.apply(this, args);
};
const callNow = immediate && !timer;
clearTimeout(timer);
timer = setTimeout(later, wait);
if (callNow) func.apply(this, args);
};
debounced.cancel = () => {
clearTimeout(timer);
timer = null;
};
return debounced;
}节流（throttle）为什么用时间戳比定时器更可靠
定时器节流（setTimeout 版）在连续快速触发时可能漏掉中间几次调用，尤其当处理函数执行时间 > 间隔时，会形成“队列堆积”；而时间戳版靠记录上一次执行时间，只要间隔达标就立刻执行，响应更及时、逻辑更线性。
立即学习“Java免费学习笔记（深入）”；
实操建议：
- 时间戳版：每次触发比较
Date.now() - previous是否 ≥wait，是则执行并更新previous - 定时器版慎用，除非明确需要“固定节奏输出”，且能保证
func执行极快（否则会跳帧） - 注意 this 和参数传递——别直接写
func(args)，要用func.apply(this, arguments)或展开运算符
Vue/React 里直接用 Lodash 的 debounce 或 throttle 有坑吗
有。Lodash 默认返回的函数不绑定 this，在 Vue 方法或 React 类组件中直接传入事件处理器会导致 this 指向丢失；另外，Lodash 的节流默认是定时器实现，不支持立即执行选项。
实操建议：
- Vue 3 Composition API 中，用
ref保存防抖函数，并在onBeforeUnmount调用.cancel() - React 函数组件中，用
useCallback+ 自实现防抖（避免依赖 Lodash 导致闭包捕获旧 state） - 如果坚持用 Lodash，务必用
_.debounce(func, wait).bind(this)或包装一层箭头函数
真正容易被忽略的是：防抖/节流只是控制调用频率，不解决函数内部异步竞态问题。比如搜索框防抖后仍可能因请求返回顺序错乱，显示旧关键词的结果——这得靠取消上一个请求（AbortController）或序列号标记来配合处理。
