防抖与节流机制不同：防抖是“停手后执行一次”，节流是“固定频率最多执行一次”；防抖需闭包保存timer、清除重设、正确传递this和参数，并支持immediate模式。
防抖（Debounce）和节流（Throttle）不是同一种机制，它们解决的是不同场景下的高频事件触发问题：防抖是「等你彻底停手了再执行一次」，节流是「不管你怎么点，我固定频率最多执行一次」。
防抖函数怎么写？debounce 的核心逻辑
关键在于每次触发时清除上一次的定时器，只保留最后一次触发后的延时执行。必须用闭包保存 timer 引用，否则无法清除。
- 必须返回一个新函数，该函数在调用时重置定时器
-
setTimeout的回调里执行原函数，且要正确传递this和参数 - 推荐支持立即执行模式（
immediate = true），即首次触发立刻执行，后续连续触发不执行，直到停止后再次等待延时
function debounce(func, wait, immediate = false) {
let timer;
return 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);
};
}
节流函数为什么不能只靠 setTimeout 简单实现？
单纯用 setTimeout 嵌套或重复设置，容易因执行延迟累积导致节奏失控；更稳妥的方式是记录上次执行时间戳，每次触发时对比当前时间是否超过间隔阈值。
- 时间戳方案比定时器方案更精准，避免「越积越多」的延迟偏差
- 注意区分「首次触发是否立即执行」——常见两种策略：
leading（开头执行）、trailing（结尾执行），可组合使用 - 若需严格限制为「每 wait 毫秒最多一次」，推荐用时间戳 +
setTimeout防止卡顿（即空闲期补发）
实际项目中该选防抖还是节流？看这三个信号
不用背概念，直接看事件行为特征：
立即学习“Java免费学习笔记（深入）”；
- 搜索框输入联想 → 用
debounce：用户还在打字，不急着查；停顿 300ms 后再请求 - 窗口
resize或滚动监听 → 优先用throttle：需要持续响应视图变化，但不必每像素都算 - 按钮防重复提交 → 用
debounce+immediate = true：点击瞬间禁用按钮，后续点击被忽略，直到请求完成重置
容易被忽略的细节：this、参数、取消能力
手写防抖/节流时，90% 的线上 bug 出在 this 绑定错误或参数丢失，而调试时又很难复现。
- 必须用
func.apply(this, args)或func.call(this, ...args)，不能直接func(args) - 建议给返回的防抖函数添加
cancel方法，便于手动清理（比如组件卸载前） - 如果原函数有返回值（如 Promise），防抖后通常不返回，因为语义上「这次调用可能被丢弃」
const debounced = debounce(fetchUser, 500); debounced.cancel = () => clearTimeout(timer); // 手动暴露 cancel
真正难的不是写出一个能跑的 debounce，而是想清楚「这个操作到底要不要被合并」「合并后失败了用户感知如何」「取消时机是否可控」——这些才是业务里踩坑最多的地方。
