防抖是等用户停止操作后执行,节流是按固定间隔执行;防抖适用于搜索等需等待结束的场景,节流适用于滚动监听等需持续反馈的场景;二者实现原理、执行时机和适用条件均不同。

直接说清本质、区别和场景,比背代码更重要。面试官想听的是你是否真正理解“为什么需要它”,而不是能否默写函数。
一、用一句话讲清核心思想
防抖:等用户“停下来”再干活。比如输入框搜索,用户每敲一个字都触发,但只在最后停顿 500ms 后才发请求。
节流:按固定节奏干活。比如滚动监听,不管用户滚得多快,最多每 200ms 执行一次处理逻辑。
二、关键区别必须点明
• 防抖只响应最后一次(或第一次,取决于 immediate 参数),适合“等操作结束”类场景;
• 节流保证单位时间内至少执行一次,适合“持续反馈”类场景;
• 防抖靠 clearTimeout + setTimeout 实现;节流常用时间戳比较(now - lastTime >= interval)或定时器开关控制;
• 防抖可能永远不执行(用户一直动),节流只要触发就一定会按节奏执行(哪怕只触发一次)。
三、手写时优先写基础版,再提优化点
防抖基础版(带 immediate 支持):
<script></script>
function debounce(fn, delay, immediate = false) {
let timer = null;
return function(...args) {
const callNow = immediate && !timer;
if (timer) clearTimeout(timer);
if (callNow) fn.apply(this, args);
timer = setTimeout(() => {
if (!immediate) fn.apply(this, args);
timer = null;
}, delay);
};
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
}
节流基础版(时间戳法):
<script></script>
function throttle(fn, interval) {
let lastTime = 0;
return function(...args) {
const now = Date.now();
if (now - lastTime >= interval) {
fn.apply(this, args);
lastTime = now;
}
};
}
补充说明:实际项目中会加 cancel 方法、返回 Promise 版本、支持 leading/trailing 等,但面试先保底写对基础逻辑。
四、举两个真实场景,带原因
• 输入搜索用防抖:避免用户还没输完就发起一堆无效请求,浪费带宽和后端资源;
• 滚动加载用节流:既要及时响应滚动位置判断是否靠近底部,又不能每像素都计算,否则卡顿明显。
如果被问“resize 用哪个”,可以说:一般用防抖(布局重算开销大,等用户调完再处理);但如果是做实时视口适配动画,也可用节流控制更新频率。










