28、什么是防抖和节流？有什么区别？如何实现？

这是前端面试里的高频题几乎每个做过交互、性能优化的人都会被问到。如果你只是回答“防抖就是延迟执行节流就是固定时间执行一次”只能算及格。如果你能讲清楚概念区别适用场景实现方式进阶参数面试表达方式那这题会答得非常漂亮。一、什么是防抖和节流1. 防抖debounce防抖的核心思想是事件被触发后不立刻执行而是等一段时间如果这段时间内又触发了就重新计时。只有“最后一次触发”结束后才真正执行。你可以把它理解成“你先别急等你彻底停下来我再执行。”例子比如搜索框输入联想用户一直输入a - ab - abc - abcd如果每输入一次都发请求开销很大用防抖后只有用户停止输入一段时间后才发送一次请求2. 节流throttle节流的核心思想是不管事件触发多频繁都会按照固定的时间间隔执行一次。你可以把它理解成“你可以一直触发但我每隔一段时间只处理一次。”例子比如页面滚动事件用户滚动时scroll会高频触发如果每次都执行计算很浪费性能用节流后比如每200ms执行一次二、防抖和节流的区别这个是面试重点一定要答清楚。核心区别一句话防抖是“只执行最后一次”节流是“按周期执行”。对比表对比点防抖节流核心思想触发后延迟执行期间再次触发则重新计时固定时间内只执行一次执行时机事件停止触发后执行事件持续触发过程中周期性执行结果特点高频触发下通常只会执行最后一次高频触发下会规律执行多次适用重点减少最终执行次数控制执行频率常见场景搜索输入、表单校验、窗口 resizescroll、mousemove、拖拽、按钮连点控制更容易理解的比喻防抖像电梯关门每次有人进来门就重新等几秒再关直到没人再进门才真正关上节流像水龙头限流水一直流但出水速度被控制住了不会无限制地全部放出来三、为什么需要防抖和节流因为浏览器里很多事件触发频率特别高比如scrollresizemousemoveinputkeyup如果每次触发都执行复杂逻辑会带来问题页面卡顿重复请求浪费 CPU重复渲染用户体验下降所以本质上防抖和节流都是为了优化高频事件处理提升性能和用户体验。四、防抖如何实现1. 基础版防抖function debounce(fn, delay) { let timer null; return function (...args) { clearTimeout(timer); timer setTimeout(() { fn.apply(this, args); }, delay); }; }2. 原理解释每次触发函数时先清除上一次的定时器重新开启一个新的定时器只有在delay时间内没有再次触发时才执行目标函数这就保证了高频触发下最终只会执行最后一次。3. 使用示例function handleInput(e) { console.log(发起搜索请求, e.target.value); } const input document.getElementById(search); input.addEventListener(input, debounce(handleInput, 500));意思是用户停止输入 500ms 后才执行搜索五、节流如何实现节流常见有两种实现思路时间戳版定时器版1. 时间戳版节流function throttle(fn, delay) { let lastTime 0; return function (...args) { const now Date.now(); if (now - lastTime delay) { fn.apply(this, args); lastTime now; } }; }特点第一次会立刻执行之后必须等delay时间后才能再次执行2. 定时器版节流function throttle(fn, delay) { let timer null; return function (...args) { if (!timer) { timer setTimeout(() { fn.apply(this, args); timer null; }, delay); } }; }特点第一次不会立刻执行而是延迟后执行固定周期内只会触发一次3. 使用示例function handleScroll() { console.log(处理滚动事件); } window.addEventListener(scroll, throttle(handleScroll, 200));意思是用户滚动过程中每 200ms 最多执行一次六、防抖和节流分别适合哪些场景这个是面试很爱问的点。1. 防抖适用场景搜索框输入联想用户停止输入后再请求减少接口调用表单校验停止输入后再校验避免每次键入都校验窗口 resize窗口大小变化结束后再重新布局按钮重复提交防止用户短时间内多次点击触发重复操作2. 节流适用场景scroll 滚动监听比如滚动懒加载、滚动吸顶、滚动进度计算mousemove鼠标移动时控制执行频率拖拽操作控制拖拽位置更新频率页面高频动画或定位计算避免过度执行七、进阶实现支持立即执行的防抖面试如果能写到这一步会明显加分。有时候我们希望第一次触发立即执行之后短时间内重复触发都忽略停止后再允许下一次触发这就是“立即执行版防抖”。function debounce(fn, delay, immediate false) { let timer null; return function (...args) { const callNow immediate !timer; clearTimeout(timer); timer setTimeout(() { timer null; if (!immediate) { fn.apply(this, args); } }, delay); if (callNow) { fn.apply(this, args); } }; }使用说明非立即执行const fn debounce(handleInput, 500, false);停止触发 500ms 后执行立即执行const fn debounce(handleClick, 1000, true);第一次点击立即执行之后 1 秒内再次点击不执行八、进阶实现支持首尾执行的节流面试里更高级一点的节流会问你是否支持首次立即执行是否支持最后一次补执行这其实就是很多库里的leading、trailing配置。下面给一个常见版function throttle(fn, delay) { let timer null; let lastTime 0; return function (...args) { const now Date.now(); const remaining delay - (now - lastTime); if (remaining 0) { if (timer) { clearTimeout(timer); timer null; } fn.apply(this, args); lastTime now; } else if (!timer) { timer setTimeout(() { fn.apply(this, args); lastTime Date.now(); timer null; }, remaining); } }; }这个版本兼顾了能立即执行一次高频触发结束后还能补一次尾部执行九、防抖和节流在 React / Vue 中怎么理解这个回答适合稍微有项目经验的场景。React 中搜索框输入请求用防抖滚动加载更多用节流使用时要注意闭包、依赖项、组件卸载时清除定时器比如 React 里如果用了防抖函数组件卸载时可能需要取消定时器避免内存泄漏或异步更新卸载组件。Vue 中watch监听输入变化时可以配合防抖页面滚动监听可以配合节流在beforeUnmount/unmounted阶段注意清理事件和定时器十、手写时容易踩的坑这个部分很加分因为说明你不是只会背定义。1.this丢失如果直接调用fn()可能导致函数内部this不对。所以一般用fn.apply(this, args);2. 参数丢失要保留事件参数或调用参数return function (...args) {}3. 定时器未清理在组件销毁或页面切换时可能要主动清除定时器。4. 节流实现方式不同表现不同时间戳版第一次立即执行最后一次可能丢失定时器版第一次不立即执行但最后一次通常能执行混合版兼顾首尾5. 防抖不等于“接口取消”防抖只是控制函数是否执行不代表已经发出去的请求自动取消。如果是搜索请求场景可能还需要配合AbortController请求序号比对只接受最后一次响应十一、面试官最喜欢追问什么1. 防抖和节流的本质区别是什么防抖关注“最后一次”节流关注“固定频率”。2. 搜索框为什么一般用防抖不用节流因为用户输入过程中通常不希望每隔一段时间都请求一次而是希望用户停止输入后再发起一次最终请求减少无效请求。3. scroll 为什么更适合节流因为滚动过程中需要持续反馈比如吸顶、懒加载、滚动位置计算所以不能等用户完全停下再执行而应该按一定频率执行。4. 防抖和节流能不能结合能。比如搜索场景输入框变化用防抖控制请求频率请求结果渲染和某些滚动监听用节流控制 UI 更新频率5. lodash 的 debounce / throttle 为什么常用因为封装成熟支持取消支持立即执行边界情况处理更完善十二、面试中怎么回答更精彩重点不是“背定义”而是有层次感。建议按这个结构回答回答结构模板第一步先给定义防抖和节流都是针对高频事件的性能优化手段。第二步说明区别防抖是在事件停止触发一段时间后再执行期间重复触发会重新计时所以通常只执行最后一次节流是不管事件触发多频繁都按固定时间间隔执行一次。第三步举场景防抖常用于搜索框输入、表单校验节流常用于滚动监听、拖拽、mousemove。第四步讲实现防抖一般通过setTimeout clearTimeout实现节流可以通过时间戳或定时器实现。第五步再进阶如果是工程实践还会考虑立即执行、尾触发、取消定时器、this 绑定、参数透传以及在 React/Vue 中组件卸载时的清理问题。这样答会显得你不是只会概念而是真的写过。十三、你可以直接背的标准答案版本一简洁版防抖和节流都是前端中处理高频事件的常见优化方案。防抖指的是事件触发后延迟执行如果在延迟期间再次触发就重新计时因此最终通常只会执行最后一次。它适合搜索框输入、表单校验这类“只关心最终结果”的场景。节流指的是无论事件触发多频繁都按照固定的时间间隔执行一次适合 scroll、mousemove、拖拽这类需要持续响应但又不能执行太频繁的场景。实现上防抖通常用clearTimeout setTimeout节流可以用时间戳或定时器实现。版本二面试加分版我理解防抖和节流本质上都是为了限制高频事件的执行次数减少不必要的计算和渲染。防抖更适合“结果导向”的场景它会在事件停止触发一段时间后再执行所以高频触发下往往只执行最后一次节流更适合“过程控制”的场景它会让函数按照固定频率执行即使事件持续触发也不会超过这个频率。比如搜索输入一般用防抖因为我们只关心用户最后输入的内容滚动监听一般用节流因为滚动过程中需要持续计算位置但不能每次 scroll 都执行。实现上防抖通常基于定时器节流常见有时间戳版、定时器版以及支持首尾执行的混合版。在项目中我还会注意 this 绑定、参数传递、组件卸载时清理定时器以及必要时结合请求取消来避免旧请求覆盖新结果。这个答案比较像真实面试表达。十四、如果面试官让你手写推荐写哪个建议优先写这两个版本最稳。手写防抖function debounce(fn, delay) { let timer null; return function (...args) { clearTimeout(timer); timer setTimeout(() { fn.apply(this, args); }, delay); }; }手写节流function throttle(fn, delay) { let lastTime 0; return function (...args) { const now Date.now(); if (now - lastTime delay) { fn.apply(this, args); lastTime now; } }; }十五、一分钟高分口述版如果你要在面试里快速回答可以直接说防抖和节流都是控制高频事件触发频率的性能优化手段。防抖是指事件触发后不会立即执行而是等一段时间如果这段时间内再次触发就重新计时所以最终一般只执行最后一次适合搜索框输入、表单校验这类场景。节流是指无论事件触发多频繁都按固定时间间隔执行一次适合 scroll、mousemove、拖拽这类持续触发的场景。实现上防抖通常用clearTimeout setTimeout节流可以用时间戳或定时器。如果再深入一点实际项目里还会考虑立即执行、尾部补执行、this 绑定、参数透传以及组件销毁时清理定时器等问题。十六、面试官最爱听的关键词答题时尽量自然带上这些词高频事件性能优化减少无效执行最后一次执行固定频率执行setTimeoutclearTimeout时间戳scroll / input / resizeleading / trailingthis 绑定参数透传定时器清理