throttle 是固定间隔最多执行一次，debounce 是停止触发后延迟执行一次；二者解决不同问题，不可互换，需按场景选型并注意 this、参数传递及定时器清理。
throttle 是让函数在固定时间间隔内**最多执行一次**的控制机制；debounce 是让函数在事件“停止触发”后，**延迟执行一次**。它们不是替代关系，而是解决两类不同问题的工具。
节流怎么写？关键在「锁住 + 重置」
最简可用的 throttle 实现依赖一个开关（inThrottle）和一个定时器来解锁：
function throttle(func, limit) {
let inThrottle;
return function() {
const context = this;
const args = arguments;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
};
}
- 每次调用都先检查
inThrottle是否为false，只有未锁定时才执行 -
setTimeout不是“延迟执行”，而是“延迟解锁”，真正执行发生在调用瞬间 - 如果事件持续高频触发（比如
scroll），它会按limit周期稳定输出，比如每 100ms 最多跑一次 - ⚠️ 注意：这个版本不保证首次/末次一定执行——如果用户快速滚动后立刻停下，最后一次可能被跳过
防抖为什么不能代替节流？看输入 vs 滚动场景
你不能用 debounce 替代 throttle 处理滚动加载，因为语义完全不同：
-
debounce(fn, 300)：用户停下滑动 300ms 后才执行一次 —— 适合搜索框，等用户“打完字”再查 -
throttle(fn, 300)：不管用户滑得多快，每 300ms 至少执行一次 —— 适合懒加载，确保滚动中及时判断是否触底 - 用防抖做滚动监听 → 用户快速滚到底部，但没停稳，
fn根本不触发，加载失败 - 用节流做搜索框 → 用户还在输入，就已发了请求，浪费接口、返回错结果
真实项目里，参数选多少才不卡也不丢？
没有通用值，得看场景和设备性能：
-
resize事件：通常100–250ms足够，太短无意义，太长会让布局响应迟钝 -
scroll滚动监听（含懒加载）：建议16–100ms，16ms≈ 60fps 渲染帧率，能匹配屏幕刷新节奏 -
mousemove：若用于拖拽反馈，可设16ms；若只是记录轨迹，50–100ms更省资源 - ⚠️ 别硬写死数字：移动端 touchmove 触发更密集，PC 端 mousemove 可能更稀疏，考虑用
requestAnimationFrame替代setTimeout做更精准的节流
容易被忽略的细节：this 和 arguments 的丢失
所有手写 throttle 或 debounce，只要没显式绑定上下文，就会在事件回调中丢失 this 和参数：
立即学习“Java免费学习笔记（深入）”；
- 错误写法：
throttle(handler, 100)(e)→handler里的this是window，e不会被传入 - 正确写法：必须用
func.apply(context, args)或现代写法func.call(context, ...args) - Vue/React 中还要注意组件卸载后定时器未清除 → 内存泄漏 + 报错
Cannot perform a React state update on an unmounted component
throttle，而是在滚动中不丢帧、在 resize 后不卡顿、在用户切页前把定时器清干净——这些边界比函数签名重要得多。 
