防抖是“等用户停止操作后再执行”，节流是“按固定间隔执行”；防抖适用于搜索输入等需等待结束的场景，节流适用于滚动、拖拽等需持续响应的场景。
防抖（Debounce）和节流（Throttle）是前端处理高频事件（如 resize、scroll、input）的核心性能优化手段，本质都是控制函数执行频率，但触发逻辑不同：防抖是“等你停了再执行”，节流是“固定节奏执行”。下面直接给出可落地的实现和关键细节。
防抖：只响应最后一次操作
适用于搜索框输入联想、窗口大小校验等——用户停止输入后才发起请求或计算。
核心逻辑：每次触发时清除上一次定时器，重新设置新定时器。
示例代码：
立即学习“Java免费学习笔记（深入）”；
function debounce(fn, delay) {
let timer = null;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}
// 使用
const search = debounce((query) => {
console.log('请求搜索:', query);
}, 300);
input.addEventListener('input', (e) => search(e.target.value));
注意点：
- 必须用
apply或call保证this和参数正确传递 - 需要立即执行首次调用？加个
immediate参数（常见于按钮防重复点击） - 组件卸载时记得清除定时器，避免内存泄漏（React 中在
useEffect清理）
节流：按固定间隔执行
适用于滚动加载、鼠标拖拽、Canvas 绘图等——不能等用户停下，但也不能每帧都执行。
核心逻辑：用时间戳或定时器控制是否允许执行。推荐时间戳方案，更精准、无延迟累积。
示例代码（时间戳版）：
function throttle(fn, limit) {
let lastRun = 0;
return function (...args) {
const now = Date.now();
if (now - lastRun >= limit) {
fn.apply(this, args);
lastRun = now;
}
};
}
// 使用
const handleScroll = throttle(() => {
console.log('滚动中...');
}, 100);
window.addEventListener('scroll', handleScroll);
对比说明：
- 定时器版节流会“丢帧”（比如 100ms 限制下，连续触发可能只执行第 1、3、5 次），时间戳版更平滑
- 节流函数本身不阻塞后续调用，只是跳过执行；防抖则会不断重置等待期
实际项目中的性能优化技巧
防抖/节流只是入口，真正提升体验还需配合其他策略：
-
用
requestIdleCallback做低优先级任务：适合非即时性操作（如日志上报、DOM 预渲染），浏览器空闲时才执行 -
监听器加
{ passive: true }：对scroll、touchstart等默认可取消事件，声明 passive 可大幅提升滚动流畅度 -
用
IntersectionObserver替代 scroll + getBoundingClientRect：懒加载图片、无限滚动检测更高效且不触发重排 -
避免在节流/防抖回调里做重计算：比如不要在
scroll节流里反复调用getComputedStyle，提前缓存或用 CSS 变量代替
怎么选？看场景需求
一句话判断：
- 要等用户“彻底结束动作”才响应 → 选 防抖（如搜索、表单验证）
- 要“持续响应但别太密” → 选 节流（如拖拽位置更新、滚动锚点高亮）
- 两者都不够？考虑 组合策略：比如先节流获取位置，再防抖触发数据加载
现代框架（React/Vue）中，建议封装成 Hook / Composable，自动处理清理逻辑，避免手动管理 timer 和 this。
