防抖是事件停止触发一段时间后执行一次，适合搜索输入等只关心最终结果的场景；节流是固定时间间隔最多执行一次，适合滚动监听等需稳定节奏的场景。
防抖（Debounce）和节流（Throttle）是处理高频事件（如 resize、scroll、input、mousemove）的两种核心策略，目的都是减少函数实际执行次数，避免性能浪费或卡顿。
防抖：等“停”了再执行
防抖的逻辑是：**只要事件持续触发，就不断重置定时器；只有停止触发一段时间后，才真正执行一次函数。** 适合用于“只关心最终结果”的场景，比如搜索框输入联想、窗口大小调整后的布局重排。
- 典型例子：用户在搜索框快速输入“hello”，你不想每按一个键都发请求，而是等他停顿 300ms 后再查“hello”
- 实现关键：每次触发时先
clearTimeout上一个定时器，再新建一个 - 注意点：如果用户一直不松手，函数永远不执行——所以防抖不适合需要“及时响应”的操作（如拖拽反馈）
节流：固定频率执行
节流的逻辑是：**无论事件触发多频繁，函数最多每隔固定时间执行一次。** 适合需要“稳定节奏响应”的场景，比如滚动监听加载更多、鼠标移动轨迹采样。
- 常见模式有“首次立即执行”和“首次延后执行”两种，一般推荐前者（即第一次触发立刻运行，之后每 N 毫秒最多再跑一次）
- 实现方式常用时间戳或定时器标记。例如记录上一次执行时间，本次触发时比较间隔是否超阈值
- 比防抖更“守时”，但可能丢掉中间部分调用——不过对视觉或体验影响通常可接受
怎么选？看你要什么
一句话判断：
立即学习“Java免费学习笔记（深入）”；
- 要最后的结果 → 用防抖（如输入验证、按钮防重复点击）
- 要稳定的节奏 → 用节流（如 scroll 监听、canvas 绘图更新）
- 不确定？先试试防抖，卡顿明显再换节流
现成可用的简易写法（无依赖）
防抖（带立即执行可选）：
function debounce(fn, delay, immediate = false) {
let timer = null;
return function(...args) {
if (immediate && !timer) fn.apply(this, args);
clearTimeout(timer);
timer = setTimeout(() => {
if (!immediate) fn.apply(this, args);
timer = null;
}, delay);
};
}节流（时间戳版，首次立即）：
function throttle(fn, limit) {
let last = 0;
return function(...args) {
const now = Date.now();
if (now - last >= limit) {
fn.apply(this, args);
last = now;
}
};
}绑定事件时直接包装即可：element.addEventListener('scroll', throttle(handleScroll, 100))
基本上就这些。不复杂，但容易忽略——尤其在移动端 touchmove 或 input 输入场景下，加一层防抖/节流，页面流畅度常能明显提升。
