节流控制单位时间最多执行一次，防抖控制连续触发后只执行最后一次；节流基于时间戳或定时器限频，防抖每次触发重置定时器；需据交互场景选择，避免误用导致卡顿或逻辑丢失。
节流（throttle）和防抖（debounce）不是“选一个用就行”的功能，而是解决两类不同时机问题的工具：节流控制“单位时间最多执行一次”，防抖控制“连续触发后只执行最后一次”。用错场景会导致交互卡顿或逻辑丢失。
节流怎么写？关键在时间戳或定时器状态锁
节流的核心是限制函数执行频率。常见实现分两种思路：
- 基于时间戳：每次调用检查距离上一次执行是否超过
delay，是则执行并更新时间戳；否则跳过 - 基于定时器：首次触发设定时器，后续触发若定时器未执行完就忽略，等它完成再重置
推荐时间戳版本，无闭包堆积风险，也避免定时器未清除导致的内存泄漏：
function throttle(fn, delay) {
let lastTime = 0;
return function(...args) {
const now = Date.now();
if (now - lastTime >= delay) {
fn.apply(this, args);
lastTime = now;
}
};
}注意：lastTime 必须初始化为 0 或负值，否则首次调用可能被跳过；fn.apply(this, args) 保证 this 和参数透传，不能直接写 fn(...args)（会丢失上下文）。
立即学习“Java免费学习笔记（深入）”；
防抖怎么写？关键在每次触发都重置定时器
防抖适用于“等用户停下来再干活”的场景，比如搜索框输入、窗口 resize 后重新布局。核心逻辑是：每次触发都清除旧定时器，新建一个。
function debounce(fn, delay) {
let timer = null;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}常见错误：
- 忘记清空
timer导致多个定时器并发执行 - 没用
apply或bind保留this，导致回调里this指向window（非严格模式）或undefined（严格模式） - 把
delay写成字符串（如"300"），setTimeout会隐式转数字但易出错，建议始终传数字
节流 vs 防抖：看触发行为和预期结果
它们的区别不在代码长度，而在你希望函数响应的“节奏”：
- 用户拖拽滑块、鼠标持续 hover、滚动监听 —— 用
throttle：需要稳定反馈，比如每 100ms 更新一次位置 - 搜索框输入、表单校验、resize 后重绘 —— 用
debounce：不需要中间过程，只要最终状态
一个典型反例：在 scroll 事件里用 debounce，用户快速滚动时可能整个过程都不触发，直到松手才执行一次，体验像卡住；而用 throttle 就能保持视觉连贯性。
实际项目中容易被忽略的点
真实环境比 demo 复杂得多：
- 需要手动取消？加个
cancel方法，清掉timer或重置lastTime - 首次立即执行？节流可加
leading: true参数，防抖可加immediate: true，但两者语义完全不同：节流的 leading 是“第一次立刻执行，之后按间隔走”，防抖的 immediate 是“第一次立刻执行，后续触发都重置倒计时” - Lodash 的
throttle默认带 trailing（最后一次触发后补一次），但原生实现不包含，别默认认为“应该有” - Vue/React 组件卸载时，记得清除防抖节流函数持有的定时器或引用，否则可能引发 setState on unmounted component 报错
真正难的不是写出一个能跑的 throttle 或 debounce，而是判断当前交互中用户到底“在等什么”，以及这个“等”是由系统决定，还是由用户行为节奏决定。
