哈喽哇，我是小不不简说的不～

使用者痛点这方面，为什么要学防抖节流？

• 频繁请求导致接口被刷：使用者快速敲键盘时每一次都触发网络请求，服务器压力山大。
• 搜索体验差：长时间等待后才返回结果，让人觉得卡顿、无感。
• 按钮点击重复提交：手速王者轻点多次后端收到同一条数据多份。
• 组件卸载后状态更新报错："Can't perform a React state update on an unmounted component" 的经典 warning。
• 滚动性能下降：没有 passive scroll listener 会导致滚动卡顿。其实，

再看基础防抖。搜索框的标配

至于场景，使用者输入“前端”，理想是只发一次查询，不是每个按键都发。

// 反例：每次按键都请求接口
input.addEventListener => {
fetch;})，

正解——最终一次输入后等300ms再执行：

function debounce {
let timer = null;return function {
clearTimeout;timer = setTimeout => fn.apply,wait);}，}
const search = debounce => fetch,300);input.addEventListener => search);

PITFALL: 连点几次都不发请求，需要停下来才能触发。若想实现“边输边查”，就不能使用纯 trailing 防抖。

从基础节流来看。按钮防主要击

场景的观点是，使用者狂点提交按钮，后端被刷到怀疑人生。按理说，

function throttle {
let last = -Infinity;return function {
const now = Date.now;if {
last = now;fn.apply，}
};}
const submit = throttle;btn.addEventListener;

PITFALL: 第一次立刻执行，随后 N 毫秒内无响应；如果使用者连续点击多次只会执行第一次。

双剑合璧这方面。leading + trailing 都要

既想让按钮立即响应，又想让搜索框最终一次输入也能触发。lodash 的实现就是这种组合。

function debounce {
let timer = null;let lastArgs = null,lastThis = null;let lastCall;怎么说呢，function invoke {
const args = lastArgs。context = lastThis;lastArgs = lastThis = null;fn.apply，}
function start {
lastCall = Date.now;timer = setTimeout;}
function timerEnd {
const now = Date.now;if {
timer = setTimeout);} else {
timer = null;if return，invoke;}
}
return function {
lastArgs = args;lastThis = this;
if { // 没有计时器
if invoke;// 前置调用
start;} else if { // 后置调用
clearTimeout;怎么说呢，timer= setTimeout;}
}，}

PITFALL: 上面简化版仍缺少 maxWait / cancel / flush；在生产环境建议直接用 lodash-es 的 debounce。

说到this绑定。经典踩坑

const obj => ({
至于name，'小不',search{ console.log;}
})，input.addEventListener;// ❌ this 是 input
input.addEventListener);// ❌ this 是 input
// 正确写法：
input.addEventListener => obj.search,));/* ✓ this 是 obj */

PITFALL: setTimeout 内部默认 this 为 window，必须使用 fn.apply。按理说，箭头函数可绕过但不是根本方法。

从立即执行来看，第一次也要传参

如果只需要 leading模式。需要注意首次调用拿到的是上一次保存的参数，而非最新值：

debounce;

PITFALL:- 当 leading=true 时如果你在函数内部读取外部变量。请确保它已经更新，否则可能拿到旧值。

从取消机制来看。必须能 abort

• Situtation: component unmount while request still pending.
• User navigates away before debounced callback fires.
• If not cancelled → state update after unmount → warning.

const searchDebounced=debounce,300);searchDebounced;searchDebounced.cancel;// cancel queued call

PITFALL:- 未在 useEffect 或清理函数中取消，会出现 React 警告。

maxWait：lodash 的精髓

• No input for long time → no request ever fired.
• Add maxWait to force execution after certain time even when user keeps typing.
• A good balance prevents “deadlock” while still limiting requests.
• Mistuning can cause N ms interval requests despite being “debounced”.

const search=debounce;/* logic:
* No matter how often triggered,* will force execute after at most maxWait.
*/

requestAnimationFrame 节流：滚动更顺滑

• The logic is similar to a ~16ms throttle .
.
• This approach syncs with browser repaint cycles for smoor scrolling..

PITFALL:- rAF pauses in background tabs;upon resume it may run immediately causing “heartbeat” delays.

scroll + passive：性能关键

• Makes mobile scrolling feel snappier by eliminating delay..
• If you later want to call e.preventDefault。it will be ignored when passive:true.

PITFALL:- Don’t mix passive:true with preventDefault calls – y’ll be silently dropped.

React useEffect里的防抖：闭包陷阱

• The inner callback closes over stale query value because dependencies array empty..
• The solution is to include query in dependencies or store debounced function in useRef so it persists across renders without re‑creating every time.

html 提交👆️👆️👆️...\

如果你遇到新坑或者想讨论更多技巧，请留言！💬🛠️

PS: 三连随缘，催更的小伙伴们记得保持冷静😂

---