手写防抖函数，30 秒怎么答？从定时器重置到追问三连全拆解

手写防抖函数30 秒怎么答从定时器重置到追问三连全拆解【免费下载链接】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面试官抛过来一句话“手写一个防抖函数顺便说说为什么这么写。”别慌。这题在 30-seconds-of-interviews 仓库里有标准答案。你现在背出 30 秒版再扛住后面的追问链就算拿下这道题。背诵版答案定义、机制、场景各一句先别急着写代码。面试官真正想看的是你能不能 30 秒内把定义、机制、场景三层说完整。标准答案取自 questions/debouncing.md 的 Answer 部分压缩成四句话防抖是“等事件停下来、只执行一次”的技巧。机制就一个定时器每次事件都clearTimeout再setTimeout重置。事件流安静满 delay目标函数才真正跑起来原始监听器每秒 20 多次的触发被压成一次。最典型场景搜索框里用户停止输入后才发一次 API 请求。定时器重置标准实现怎么跑起来30 秒版说完接下来要把“为什么”撑起来。防抖的全部原理可以浓缩成一句话重置定时器。每次事件到来先扔掉上一个还没到期的定时器再立一个新的、延迟 delay 的定时器。只要事件还在连续到来任何一个定时器都不会真正到期。等事件流停下来最后一个定时器才会走完函数才执行。这就是“把多次连续调用压成一次”的全部机制。仓库里的标准实现只有 8 行原文档中addEventListere是笔误这里已修正const debounce (func, delay) { let debounceTimer; return function() { const context this; const args arguments; clearTimeout(debounceTimer); debounceTimer setTimeout(() func.apply(context, args), delay); } } window.addEventListener(scroll, debounce(function() { // Do stuff, this function will be called after a delay of 1 second }, 1000));记住定时器的变量let debounceTimer声明在返回函数之外、debounce之内靠闭包一直保存着。每次调用防抖函数读写的都是同一个变量所以“上一次的定时器”永远在场。如果把它误声明进返回函数里每次调用都会拿到一个全新的空变量防抖就退化成空操作。clearTimeout 是灵魂重置逻辑就是那一行先清掉旧定时器再立新定时器。它保证了“事件不停函数不跑”。把这行删掉代码就退化成“每过 delay 执行一次”行为反而接近节流防抖题直接答错方向。只有最后一个定时器活下来setTimeout(..., delay)是唯一真正触发目标函数的那一行。前 N-1 个定时器全被clearTimeout丢弃只有最后一个事件立的定时器能走完。这就是 trailing 行为等安静了才动手并且用的是最后一次的参数和上下文。this 和 arguments 不丢const context this; const args arguments;把调用现场的上下文和参数存下来再用func.apply(context, args)原样交出去。为什么要存因为包装函数必须不改变原函数的调用语义事件监听器里的this往往是 DOM 元素丢了它回调就找不到自己挂在哪个元素上。进阶四问面试官为什么总问这个标准实现答完只是及格面试官继续往下挖的是机制的边界而且提问顺序基本固定。Leading 模式首次触发立刻执行有些场景要求“第一次触发就立即执行延迟窗口内的后续调用全部忽略”比如点击后马上上报。思路是把“定时器是否存在”当成冷却标志给签名加一个immediate falselet timer; return function(...args) { const callNow immediate !timer; clearTimeout(timer); timer setTimeout(() { timer null; if (!immediate) func.apply(this, args); }, delay); if (callNow) func.apply(this, args); };callNow决定要不要立即执行定时器则兼做冷却开关它存在期间后续调用一律忽略。面试官问这个是想看你能不能分清 leading 和 trailing能不能按需求调参而不是只背一种写法。挂起执行怎么取消给函数挂个 cancel防抖函数要带一个 cancel 方法否则组件卸载时没法清掉那个还没到期的定时器debounced.cancel () { clearTimeout(timer); timer null; };在卸载清理里调用它。原因是定时器对着已卸载的状态触发属于无效操作最坏情况还会触发对已卸载组件 setState 的警告。箭头函数陷阱外层普通函数内层箭头return function() {}刻意用普通函数就是为了接住事件监听器传入的动态this。外层改成箭头this就被锁死在外层作用域透传链条直接断掉。反过来内层 setTimeout 的回调必须用箭头这样context和args从闭包读取不会被定时器回调自己的this顶掉return function() { // 普通函数接住动态 this clearTimeout(debounceTimer); debounceTimer setTimeout(() { // 箭头从闭包读 context func.apply(context, args); }, delay); }少 this 和 arguments 会怎样如果面试官让你把context和args两行删掉看看你应该立刻回答原函数会在没有接收者、没有参数的情况下被调用包装函数就悄悄破坏了契约const context this; const args arguments; debounceTimer setTimeout(() func.apply(context, args), delay);apply是兑现“调用语义不变”这个契约的手段这 8 行代码恰恰把隐藏考点全埋在这里。追问三连节流、场景选择与卸载代码写完、进阶讲完真正的考验是连环追问。 按出现频率三连问基本是这个顺序。第一问节流和防抖差在哪防抖是“等安静下来才动手”节流是“固定窗口内最多动一次手”。防抖合并的是窗口内的多次调用节流限制的是执行频率的上限。一句区别加一句机制差异这问就满分了。第二问真实场景怎么选看你要什么只关心最终状态比如搜索输入、窗口 resize 后的重排选防抖需要保证最低执行频率比如滚动加载、拖拽、游戏循环选节流。每边各举一个具体场景空讲规则没有例子会掉分。第三问组件卸载了定时器还挂着怎么办给防抖函数挂上 cancel在卸载清理时调用。这也是为什么“防抖函数应该工厂式生成而不是写成内联函数”——工厂返回的对象才能在外层挂 cancel 这类附加方法调用方也拿得到句柄。这道题在仓库里怎么流转md → json → 站点最后把视角拉远这道题在 30-seconds-of-interviews 里不是一份孤立文件而是走完了整条数据管线。内容源头是 questions/debouncing.md题目、#### Answer代码、#### Good to hear加分点、##### Additional links参考链接都写在里面scripts/extract.js 用getSection(#### Answer, contents)和getSection(#### Good to hear, contents, false)逐段解析再拼上 tags 与难度 expertise写入 data/questions.jsonwebsite/js/components/ 目录下的 Filter.js 等组件基于这份 json 渲染题目列表支持按标签过滤和排序这道题最终可浏览、可检索。五条速记卡定义等事件安静满 delay才执行一次机制clearTimeout重置 setTimeout延迟只有最后一个定时器存活标准代码闭包存定时器apply透传this和arguments进阶四件套leading 模式、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），仅供参考