防抖是事件连续触发时只执行最后一次，节流是固定间隔内最多执行一次；前者适用于搜索输入、resize等需“停止后响应”的场景，后者适用于scroll、拖拽等需“匀速响应”的场景。
防抖和节流是优化高频事件（如 resize、scroll、input、click）处理函数的核心手段，本质是控制函数执行频率：防抖让函数在连续触发后只执行最后一次，节流则保证函数按固定间隔至少执行一次。
防抖（Debounce）：等“停”了再执行
适用场景：用户输入搜索建议、窗口大小调整后重新布局。核心思路是每次触发时清除上一个定时器，重设新定时器。
简单实现：
function debounce(fn, delay) {
let timer = null;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
使用示例：
立即学习“Java免费学习笔记（深入）”；
const handleInput = debounce(() => {
console.log('发起搜索请求');
}, 300);
inputElement.addEventListener('input', handleInput);
- 用户快速输入10个字符，只会在最后停顿300ms后执行一次
- 注意：闭包中保存的
timer必须可被清除，否则会累积定时器 - 如需立即执行首次调用（leading edge），需额外加标志位逻辑
节流（Throttle）：固定节奏执行
适用场景：滚动监听加载更多、鼠标拖拽实时反馈。目标是限制单位时间内最多执行一次。
两种常见实现方式：
- 定时器版（推荐）：触发时若无活跃定时器，则执行并启动延时器；延时期间触发不执行，但可记录最新参数，延时结束后执行最后一次
- 时间戳版：记录上次执行时间，每次触发时比较当前时间与上次执行时间差，大于间隔才执行并更新时间戳
定时器版节流示例：
function throttle(fn, delay) {
let timer = null;
let lastArgs = null;
return function(...args) {
lastArgs = args;
if (!timer) {
timer = setTimeout(() => {
fn.apply(this, lastArgs);
timer = null;
lastArgs = null;
}, delay);
}
};
}
该版本兼顾响应性与平滑性，适合大多数滚动/拖拽场景。
实际应用中的关键细节
-
this 和参数传递：用
fn.apply(this, args)或箭头函数 + 展开运算符确保上下文和参数正确 -
及时清理：组件卸载或事件解绑前，应清除残留定时器（如 React 中在
useEffect清理函数里clearTimeout） - 区分业务语义：搜索建议用防抖，滚动到底部加载用节流；误用会导致体验卡顿或响应延迟
- 避免嵌套包装：不要对已防抖/节流的函数重复包装，易引发逻辑混乱
现代开发中的简化方案
如果项目使用 Lodash，可直接调用 _.debounce 和 _.throttle，它们已处理好 this 绑定、取消、立即执行等边界情况。
Vue 3 的 v-on:scroll.throttle 或 @input.debounce.300（需配合插件）也提供了模板级语法糖，但底层仍是类似逻辑。
不复杂但容易忽略的是：别只写防抖节流，要结合业务判断是否真需要——比如点击按钮提交表单，用防抖反而会让用户困惑；而一个每秒触发20次的 mousemove，不用节流就可能拖慢页面。
