防抖是最后一次触发后延迟执行，节流是固定间隔最多执行一次；防抖适用于搜索输入等需等待停止的场景，节流适用于滚动加载等需匀速控制的场景。
防抖（Debounce）和节流（Throttle）是处理高频事件（如 resize、scroll、input）的两个经典策略，核心区别在于：防抖等“最后一次触发后过段时间再执行”，节流则是“固定时间间隔内最多执行一次”。用错场景会导致体验卡顿或逻辑失效，下面直接给出可落地的实现与使用要点。
防抖函数：适合“等用户停下来再响应”
典型场景：搜索框输入联想、窗口尺寸校验、表单验证。用户连续输入时，只在停顿后执行一次，避免无效请求或重绘。
基础实现（支持立即执行）：
function debounce(fn, delay, immediate = false) {
let timer = null;
return function(...args) {
if (timer) clearTimeout(timer);
if (immediate && !timer) fn.apply(this, args);
timer = setTimeout(() => {
if (!immediate) fn.apply(this, args);
timer = null;
}, delay);
};
}- immediate = true：首次触发立刻执行，后续触发需等待 delay 后才可能再次执行（适合初始化动作）
- immediate = false（默认）：等用户停顿 delay 毫秒后再执行，更常用
- 注意清除定时器前先判断
timer是否存在，避免重复 clearTimeout 报错
节流函数：适合“匀速控制执行频率”
典型场景：滚动加载、鼠标拖拽、Canvas 绘图。要求函数按固定节奏执行，不能太密也不能完全跳过。
立即学习“Java免费学习笔记（深入）”；
两种主流实现方式：
定时器版（推荐）——稳定、易理解
function throttle(fn, delay) {
let timer = null;
return function(...args) {
if (!timer) {
timer = setTimeout(() => {
fn.apply(this, args);
timer = null;
}, delay);
}
};
}时间戳版——首次立即执行，但结尾可能遗漏一次
function throttleByTime(fn, delay) {
let last = 0;
return function(...args) {
const now = Date.now();
if (now - last >= delay) {
fn.apply(this, args);
last = now;
}
};
}- 定时器版更稳妥：保证两次执行间隔 ≥ delay，结尾不会丢帧
- 时间戳版首调即执行，但若用户持续触发，最后一下可能因未达间隔而被跳过
- 实际项目中建议用定时器版，或封装成支持“leading/trailing”选项的增强版
使用时的关键细节
-
this 和参数要正确传递：务必用
fn.apply(this, args)或fn(...args)，否则上下文丢失 -
记得销毁定时器（尤其组件卸载时）：React 中在
useEffect清理函数里调用clearTimeout；Vue 中在beforeUnmount做清理 - 不要对同一个函数反复 debounce/throttle：每次调用返回新函数，原包装函数仍存在，易导致内存泄漏或逻辑混乱
- delay 值需权衡：输入框建议 200–300ms；滚动/拖拽可设 16ms（≈60fps）或 50ms（平衡性能与响应）
现代开发中的简化用法
如果用 React，可借助 useCallback + 自定义 Hook 封装：
function useDebounce(callback, delay) {
useEffect(() => {
const handler = setTimeout(callback, delay);
return () => clearTimeout(handler);
}, [callback, delay]);
}
<p>// 使用
const handleInput = useCallback(() => {
fetchSuggestions(value);
}, [value]);</p><p>useDebounce(handleInput, 300);或者直接用成熟库如 lodash.debounce / lodash.throttle，它们已处理了 this 绑定、取消、边缘 case 等问题，生产环境更可靠。
