节流和防抖是控制函数执行频率的技术：防抖在事件停止后执行一次，适用于搜索联想、防重复提交；节流按固定间隔执行，适用于滚动监听、拖拽更新。
节流（Throttle）和防抖（Debounce）都是用来控制函数执行频率的技术，核心目标是减少高频触发带来的性能压力，比如滚动、输入、窗口缩放等场景。它们不是互斥的方案，而是适用不同业务逻辑——关键看“你希望函数在连续触发中怎么响应”。
防抖：等“停”了再执行
防抖的逻辑是：只要事件还在持续触发，就不断重置定时器；只有当触发完全停止超过设定时间后，才真正执行一次函数。
- 适合场景：搜索框输入联想、表单校验、按钮提交防重复点击
- 典型表现：“用户打完字、停顿 300ms 后才发请求”
- 实现要点：每次触发前先清除上一个定时器，再新建一个
节流：固定节奏执行
节流的逻辑是：无论事件触发多频繁，都保证函数按固定间隔（如每 200ms）最多执行一次。
- 适合场景：滚动监听计算吸顶、鼠标拖拽位置更新、Canvas 动画帧控制
- 典型表现：“滚动过程中，每 200ms 最多更新一次位置，不卡顿也不丢关键状态”
- 实现要点：可用时间戳比对或定时器开关（leading/trailing 可选）
一个例子看区别
假设用户在 1 秒内快速滚动了 50 次：
立即学习“Java免费学习笔记（深入）”；
- 用防抖（delay=300ms）：只要滚动没停满 300ms，函数一次都不执行；停稳后只执行最后一次
- 用节流（interval=200ms）：大概率会执行 4～5 次（第 0ms、200ms、400ms…），节奏可控
简单可直接用的代码片段
防抖（返回新函数）：
function debounce(fn, delay) {
let timer = null;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}节流（时间戳版，立即执行一次）：
function throttle(fn, interval) {
let lastTime = 0;
return function(...args) {
const now = Date.now();
if (now - lastTime >= interval) {
fn.apply(this, args);
lastTime = now;
}
};
}基本上就这些。选哪个不取决于“哪个更高级”，而取决于你的交互预期：要“最后稳态结果”，就用防抖；要“过程有节奏地响应”，就用节流。
