防抖是等用户操作停止后执行，核心为重置计时；节流是固定间隔执行，核心为强制间隔；选择依据是业务语义：需最终结果用防抖，需过程反馈用节流。
防抖 debounce：等用户“停下来”再干活
防抖的核心是「重置计时」：只要事件还在频繁触发，就不断清掉上一个定时器，只在最后一次触发后等待指定时间才执行函数。它不是限制频率，而是确保“操作结束后的最终响应”。
- 典型场景：
input搜索框输入、resize窗口调整、表单实时验证（比如邮箱格式） - 关键参数：
wait时间不能太短（如100ms），否则起不到过滤作用；也不宜过长（如 >500ms），否则用户会感知延迟 - 常见错误：没保存
this和arguments，导致回调里this指向丢失或参数为空；漏掉clearTimeout导致内存泄漏或误执行
function debounce(func, wait) {
let timeout;
return function(...args) {
const context = this;
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), wait);
};
}节流 throttle：固定节奏“匀速干活”
节流的核心是「强制间隔」：无论事件多密集，函数最多每隔 interval 毫秒执行一次。它不关心用户是否停手，只保证执行节奏可控。
- 典型场景：
scroll滚动加载、mousemove拖拽位置更新、keydown射击游戏按键限制 - 两种主流实现方式：时间戳版（更精准，但首次立即执行）、定时器版（首次有延迟，但更易理解）
- 容易踩的坑：用
setTimeout实现时未设标志位（如inThrottle），导致多次进入逻辑；时间间隔设得太小（如16ms）反而逼近帧率，失去节流意义
function throttle(func, interval) {
let lastTime = 0;
return function(...args) {
const now = Date.now();
if (now - lastTime >= interval) {
func.apply(this, args);
lastTime = now;
}
};
}
debounce 和 throttle 到底该选哪个？看触发意图
别死记“搜索用防抖、滚动用节流”，关键看业务语义：
- 需要“最后一次动作的结果” → 选
debounce（例如：用户输完手机号才校验格式） - 需要“持续过程中的状态反馈” → 选
throttle（例如：滚动时每200ms检查是否接近底部） - 两者都能用但效果不同：对
resize，debounce是等拖完再重排布局；throttle是边拖边有限更新尺寸——后者可能造成布局抖动，前者更稳
实际项目中必须注意的细节
真实代码里，这两个函数不是写完就能直接塞进 addEventListener 的：
立即学习“Java免费学习笔记（深入）”；
- 必须用闭包缓存返回的防抖/节流函数，避免每次监听都新建一个（否则
clearTimeout失效） - 现代浏览器支持
passive: true，但和throttle配合时要注意：节流函数若内部调用preventDefault，就不能设为 passive - Vue/React 中绑定事件时，别在 render 里直接调用
debounce(fn, 300)，会导致每次渲染都生成新函数，破坏事件绑定稳定性
真正难的不是写出这两个函数，而是在滚动监听里发现卡顿后，能立刻判断是该加节流、换时间戳实现，还是该把计算逻辑移到 requestIdleCallback 里去。
