防抖函数关键在每次触发清除前次定时器并重设，节流函数关键在用时间戳或开关控制执行频率；二者均需保持this和参数透传，实际使用要注意事件移除、React/Vue绑定陷阱及竞态问题。
防抖函数怎么写？关键在“重置定时器”
防抖的核心逻辑是：每次触发都清除上一次的延时，重新计时。适用于搜索框输入、窗口大小调整等“只关心最终结果”的场景。
- 必须用
clearTimeout清除前序定时器，否则会累积执行 - 定时器 ID 要存在闭包变量里，不能每次调用都新建一个未被引用的定时器
- 建议支持立即执行模式（
immediate参数），即首次触发立刻执行，后续触发才防抖
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);
};
}注意：fn.apply(this, args) 保证了原始上下文和参数透传，漏掉这点会导致 this 指向丢失或参数截断。
节流函数怎么写？关键是“开关控制”或“时间戳比对”
节流的目标是固定频率执行，比如滚动事件中每 100ms 最多执行一次。有两种主流实现方式：
- 定时器版：用布尔开关控制是否允许注册下一次定时器
- 时间戳版：记录上次执行时间，当前时间减去它，大于间隔才执行
时间戳版更精准（无延迟累积），但无法保证首次立即执行；定时器版首次可立即执行，但可能因延迟导致两次执行间隔略大于设定值。
立即学习“Java免费学习笔记（深入）”；
// 时间戳版（推荐）
function throttle(fn, limit) {
let last = 0;
return function(...args) {
const now = Date.now();
if (now - last >= limit) {
fn.apply(this, args);
last = now;
}
};
}使用时注意：limit 过小（如 10ms）在低性能设备上可能几乎不执行，建议根据场景设为 50–16ms（对应 20–60fps）。
防抖和节流在实际事件绑定中容易踩哪些坑？
- 直接把防抖/节流函数赋给
addEventListener 后，无法用 removeEventListener 移除——因为每次调用返回的是新函数。解决办法：把防抖/节流后的函数缓存为变量再传入。
- 在 React 函数组件中，
useCallback 包裹防抖函数时，若依赖项变化，会生成新函数，导致防抖失效或重复绑定。应把防抖函数定义在 useRef 或 useMemo 中稳定引用。
- Vue 中使用
v-on:scroll.native 绑定节流函数时，若没用 .passive 修饰符，在 iOS 上可能卡顿，因为浏览器无法异步处理 passive 事件。
该选防抖还是节流？看数据更新意图
- 输入类操作（如搜索、表单校验）：优先防抖。用户还在敲字，你不需要每敲一下就发请求。
- 滚动/拖拽类操作（如懒加载、吸顶导航）：优先节流。需要持续感知位置变化，但不必每一帧都响应。
- 极端情况（如游戏手柄输入）：两者都不够，得结合
requestAnimationFrame 或 Web Worker 处理高频数据流。
addEventListener 后，无法用 removeEventListener 移除——因为每次调用返回的是新函数。解决办法：把防抖/节流后的函数缓存为变量再传入。useCallback 包裹防抖函数时，若依赖项变化，会生成新函数，导致防抖失效或重复绑定。应把防抖函数定义在 useRef 或 useMemo 中稳定引用。v-on:scroll.native 绑定节流函数时，若没用 .passive 修饰符，在 iOS 上可能卡顿，因为浏览器无法异步处理 passive 事件。- 输入类操作（如搜索、表单校验）：优先防抖。用户还在敲字，你不需要每敲一下就发请求。
- 滚动/拖拽类操作（如懒加载、吸顶导航）：优先节流。需要持续感知位置变化，但不必每一帧都响应。
- 极端情况（如游戏手柄输入）：两者都不够，得结合
requestAnimationFrame或 Web Worker 处理高频数据流。
防抖和节流本身不解决异步竞态问题。比如防抖后的搜索请求，后发的请求先返回，覆盖了先发但慢的响应——这得靠取消请求（AbortController）或响应比对来处理，不是节流防抖能覆盖的。
