30-seconds-of-interviews 里的 debouncing：为什么你的搜索框还在疯狂发请求？

30-seconds-of-interviews 里的 debouncing为什么你的搜索框还在疯狂发请求【免费下载链接】30-seconds-of-interviewsA curated collection of common interview questions to help you prepare for your next interview.项目地址: https://gitcode.com/gh_mirrors/30/30-seconds-of-interviews页面卡不是网络慢是你的代码在每次键入时都老老实实发了一次请求。用户敲完 react 这五个字母Network 面板里已经躺着五个重复的 /search 调用换成 scroll 事件裸监听器每秒轻松触发二十多次主线程直接被灌满。这是 30-seconds-of-interviews 里 debouncing防抖这道题反复出现的背景——高频事件不该每次都干活。先把最直觉的写法摆出来看看它为什么救不了场// 最直觉的防抖包装时就把执行延迟掉 const debounce (func, delay) setTimeout(func, delay); window.addEventListener(scroll, debounce(() { // 更新滚动条相关 UI }, 1000));这段代码的定时器在 addEventListener 那一行就启动了页面加载完一秒后回调执行一次此后的滚动全部被忽略。事件来了既没有重置计时函数也没等到用户停手才动手——它连防的对象都没找对更糟的是 func 里的参数与上下文在这个版本里同样没有着落。迭代两版修出一个能跑的 debounce 实现 要合并且只在最后执行一次得让定时器跟着每次事件走再把 this 和参数还给原函数。两步走迭代一让定时器跟着事件走先给函数套上闭包里的计时器每次调用先掐掉旧的再立新的const debounce (func, delay) { let timer; return function () { clearTimeout(timer); timer setTimeout(func, delay); }; };到这里停止触发后只执行一次的行为已经对了。但setTimeout(func, delay)是裸调用原函数拿不到调用时的this比如事件元素也接不到arguments。只要被包函数依赖这两样——哪怕只是想读一下 event 参数——就立刻翻车。迭代二把 this 和参数透传回去调用时把上下文和参数存下来到期时再 apply 回去const debounce (func, delay) { let timer; return function () { const context this; const args arguments; clearTimeout(timer); timer setTimeout(() func.apply(context, args), delay); }; }; window.addEventListener(scroll, debounce(function () { // 用户停止滚动 1 秒后只执行这一次 console.log(scroll settled on, this); }, 1000));这里有个容易忽略的点外层刻意写成普通函数才能动态捕获调用时的 this 与 arguments内层 setTimeout 回调却用箭头函数让 func.apply(context, args) 依赖的闭包变量不被覆盖。这个内外有别是面试官最爱抠的细节。拿搜索输入这条流程压一压行为对不对走一遍时间线最清楚。设防抖延迟 300mst0 敲下 r立一个计时器t100ms 敲 re掐掉旧的立新的t900ms 敲完 act——只要持续输入计时器永远到不了期。用户在 t900ms 停手t1200ms 最后一个计时器到期请求发出去全程只有 1 次而不是 5 次。反过来如果用户在 t600ms 处短暂停顿了 400ms那一次停顿就会兑现一次请求之后继续输入又重新立计时器——每次停顿对应一次执行这正是防抖的语义。const searchInput document.querySelector(#search); // 把发请求包成 300ms 防抖输入停顿后才真正请求 const fetchResults debounce(function (query) { fetch(/api/search?q${encodeURIComponent(query)}) .then((res) res.json()) .then(renderResults); }, 300); searchInput.addEventListener(input, (event) { fetchResults(event.target.value); });这里 fetchResults 拿到的 event.target.value 正是靠上一版的 args 透传过去的——透传没修好的话query 就是 undefined。顺带一提只发一次请求还避免了旧响应盖掉新结果带来的竞态。给 debounce 加 cancel 和 leading再和节流比一比 ⚠️面试官大概率会接着问真到生产环境这版还差什么差两件事——主动取消的能力以及首次立即执行的 leading 模式const createDebounced (func, delay, { immediate false } {}) { let timer; const debounced function (...args) { // 冷却期内timer 存在leading 模式直接忽略本次 const callNow immediate !timer; clearTimeout(timer); timer setTimeout(() { timer null; if (!immediate) func.apply(this, args); }, delay); if (callNow) func.apply(this, args); }; // 组件卸载等场景主动取消挂起的调用 debounced.cancel () clearTimeout(timer); return debounced; };immediate 为 true 时首次调用立刻执行、随后进入冷却期直到 timer 清空适合首次点击立刻响应的点赞类交互cancel 则负责在组件卸载前掐掉还没到期的那次执行避免回调去操作已经不存在的 DOM。这里有个容易踩的坑把一个已经防抖过的函数再传进 debounce 包一层两个定时器叠加延迟语义直接错乱排查起来非常痛苦——防抖函数应当只包一次。和节流的关系用这张表说清维度debounce 防抖throttle 节流执行时机事件停止触发、延迟期满后才执行一次固定间隔内最多执行一次典型场景搜索输入、resize 后重算布局滚动加载、拖拽、轮询本质合并窗口内的多次调用限制执行频率的上限最后一次调用必然兑现trailing视实现而定从 Markdown 到页面这道题的数据流题目本身就是仓库里的一份 Markdown走完一条固定链路才出现在页面上。questions/debouncing.md 存放这道题的问法、标准答案和 scroll 示例答案与补充话术分别写在#### Answer和#### Good to hear两个小节里scripts/extract.js 负责把 questions/ 下的全部 Markdown 转成 JSON按小节切内容的活由 scripts/util.js 里的 getSection 完成输出的 data/questions.json 再被前端消费website/js/components/Filter.js 渲染出按标签过滤、排序的控件让你在题库页按 JavaScript 这类标签筛出这道题。整条链路一句话Markdown 题目 → extract.js 解析 → questions.json → 前端组件渲染。面试前先回答自己这五个问题与其背实现不如先逼自己答对这几个面试官问为什么外层用普通函数、内层用箭头函数你能一句话说清吗如果 delay 传 0防抖还算防抖吗把已经防抖过的函数再包一层回调最终会延迟多久、为什么React 类组件里 cancel 应该挂在哪个生命周期忘了会怎样用户连续输入三十秒不停顿中间发过请求吗能把这五个问题顺下去这道题就扛得住追问了。【免费下载链接】30-seconds-of-interviewsA curated collection of common interview questions to help you prepare for your next interview.项目地址: https://gitcode.com/gh_mirrors/30/30-seconds-of-interviews创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考