防抖是“等你停手再执行”，节流是“固定节奏执行”；防抖适用于搜索建议、表单校验等需操作结束后响应的场景，节流适用于滚动加载、resize适配等需持续但限频响应的场景。
防抖（Debounce）和节流（Throttle）是前端处理高频事件的两种经典策略，核心区别在于：防抖是“等你停手再执行”，节流是“固定节奏执行”。选错会导致交互卡顿或逻辑失效，比如搜索框输入、窗口缩放、滚动加载等场景，必须按需选用。
防抖：只响应最后一次操作
防抖函数会忽略前面所有触发，只在最后一次调用后等待指定延迟时间，若期间再次触发则重新计时。适合需要“用户操作结束才响应”的场景。
- 典型适用场景：实时搜索建议、表单输入校验、按钮重复点击防护
- 实现要点：每次调用先清除已有定时器，再新建一个；闭包保存 timer 引用
-
简单实现：
<pre><code>function debounce(fn, delay) {
let timer;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}</code></pre>
节流：控制执行频率上限
节流保证函数在单位时间内最多执行一次，无论触发多少次。适合需要“持续响应但不能太密”的场景，比如滚动监听、鼠标移动追踪。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 典型适用场景：无限滚动加载、canvas 绘图响应、resize 适配
- 实现要点：记录上次执行时间，每次触发时判断是否超过间隔；或用定时器“预约下一次执行”
-
时间戳版（推荐）：
<pre><code>function throttle(fn, limit) {
let lastTime = 0;
return function(...args) {
const now = Date.now();
if (now - lastTime >= limit) {
fn.apply(this, args);
lastTime = now;
}
};
}</code></pre>
怎么选？看用户行为意图
关键不是技术多酷，而是匹配真实交互逻辑：
立即学习“Java免费学习笔记（深入）”；
- 用户输入后想等他打完字再查（如搜索框），用防抖
- 用户滚动页面想实时更新吸顶状态或加载更多，用节流
- 按钮提交防止误点，用防抖（delay 设为 300ms 左右）
- 拖拽过程中要持续获取坐标，但不需要每毫秒都算，用节流（limit 设为 16ms 或 50ms）
小提醒：别忘了 this 和参数绑定
实际使用中，防抖/节流函数返回的是新函数，容易丢失原始调用上下文。建议：
- 用
fn.apply(this, args)正确传递 this 和参数 - 或用箭头函数 + 显式 bind，但更推荐 apply 方式
- 现代项目可直接用 Lodash 的
_.debounce和_.throttle，它们已处理好边界情况（如取消、立即执行选项等）
