防抖解决连续触发事件时只在最后一次操作结束后延迟执行的问题，如搜索框输入防频繁请求；节流则控制高频事件每N毫秒最多执行一次，适用于scroll、拖拽等需限频场景。
防抖（debounce）解决什么问题？
用户连续触发事件（比如
、
、
）时，你只想在“最后一次操作结束后过一段时间”再执行处理逻辑。典型场景是搜索框输入后发请求，避免每敲一个字就调一次 API。
关键点：重置定时器，只保留最后一次的延迟执行机会。
每次触发都清除前一个
，重新设新定时器
必须保存上一个
的引用，否则无法清除
函数内部要能访问到原始参数，推荐用
+
或箭头函数闭包
节流（throttle）适合什么场景？
高频事件需要“有节制地执行”，比如
中更新滚动位置、拖拽时计算坐标。你希望它每 N 毫秒最多执行一次，而不是等停了才执行（防抖的逻辑）。
核心区别：节流关注“执行频率上限”，不是“等待静默期”。有两种主流实现方式——时间戳版（立即执行）和定时器版（延迟执行），前者更常用。
立即学习
“
Java免费学习笔记（深入）
”；
Eclipse导入Android或其他的JAVA项目的正确方法 WORD版
本文档主要讲述的是Eclipse导入Android或其他的JAVA项目的正确方法；希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看
下载
时间戳版：记录上次执行时间，当前时间减去上次时间 ≥ delay 才执行
定时器版：用
控制下一次可执行时机，期间忽略所有调用
注意 this 和参数传递，同样要用
和
为什么不能直接用
而不清理？
防抖漏掉
是最常见错误，会导致多个定时器同时存在，最终一堆重复执行；节流如果没做时间比对或定时器锁定，也会失控执行。
防抖中不
→ 多次触发产生多个并行定时器 → 最后一个未必是“最后触发”的结果
节流中不记录
或不控制
状态 → 可能每帧都执行，失去限频意义
没绑定正确的
→ 回调里取不到组件实例或 DOM 元素，尤其在 class 方法中使用时
实际用的时候要注意哪些细节？
防抖和节流函数本身是纯函数，但挂载到事件监听器时容易出错。比如 React 函数组件里反复创建新防抖函数，导致监听器地址变化，事件被重复绑定或失效。
在 React 中，用
缓存防抖/节流函数，依赖项包含
和
Vue 3 的
中，也建议在
里定义并绑定，避免每次渲染重建
原生 JS 绑定时，别写成
—— 多了一对括号，直接执行了
移动端
触发极快，delay 设太小（如 16ms）可能还是压不住，建议 ≥ 50ms
防抖和节流看着简单，真正稳定跑在线上，关键是定时器管理、上下文绑定、以及框架生命周期里的复用控制。漏掉任何一个，都可能让“优化”变成“bug 来源”。
inputresizescrollsetTimeouttimer...argsapplyfunction debounce(fn, delay) {
let timer = null;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}scrollsetTimeout...argsapplyfunction throttle(fn, delay) {
let lastTime = 0;
return function(...args) {
const now = Date.now();
if (now - lastTime >= delay) {
fn.apply(this, args);
lastTime = now;
}
};
}setTimeoutclearTimeoutclearTimeout(timer)lastTimesetTimeoutthisuseCallbackfndelaysetuponMountedelement.addEventListener('input', debounce(handleInput, 300)())touchmove