一句话总结：防抖和节流是专门用来「限制高频事件触发次数」的工具，能解决浏览器高频触发事件导致的性能浪费、卡顿、请求泛滥、逻辑错乱等几乎所有高频操作问题，是前端性能优化的核心手段。
先搞懂核心痛点：JS 里很多事件会疯狂高频触发（比如滚动、输入、窗口缩放、鼠标移动），每触发一次就执行一次函数，短时间执行成百上千次，浏览器扛不住，业务逻辑也会出问题。
一、先搞懂：什么是防抖、节流？
1. 防抖（Debounce）
核心：等你「停手」后，只执行最后一次
- 持续触发事件时，不执行函数；
- 停止触发后，等待指定时间，只执行最后一次。
生活例子：电梯关门有人进电梯，电梯不会立刻关门，会等几秒；如果一直有人进，电梯会重新计时，直到没人进来了，才关门。
2. 节流（Throttle）
核心：固定频率执行，「冷却时间」内不重复执行
- 持续触发事件时，每隔固定时间只执行一次；
- 规定时间内，无论触发多少次，都只生效一次。
生活例子：技能冷却游戏里放技能，点再快也要等冷却时间结束，才能再次释放。
二、它们到底能解决哪些问题？（高频场景全覆盖）
这两个方法几乎能解决所有高频触发事件带来的问题，覆盖前端 90% 的性能与逻辑痛点：
1. 解决「页面卡顿、掉帧、浏览器卡死」
高频事件会让 JS 引擎疯狂执行代码，占用大量 CPU 资源，页面直接卡顿。✅ 适用场景：
- 鼠标移动
mousemove - 窗口缩放
resize - 页面滚动
scroll - 拖拽元素
drag
举例：滚动加载分页不做处理：滚动 1 秒触发几十次请求，页面卡死；加节流：每隔 500ms 查一次滚动位置，只执行必要逻辑，流畅不卡顿。
2. 解决「接口请求泛滥、服务器压力爆炸」
输入搜索、表单提交最容易出现这个问题，直接导致服务器崩溃。✅ 适用场景：
- 搜索框实时联想
input - 表单实时验证
- 按钮重复点击
举例：搜索框联想不做处理：输入「JavaScript」，触发 10 次请求，服务器返回 10 条冗余数据；加防抖：输完停止打字 500ms 后，只发 1 次请求，节省服务器资源，响应更快。
3. 解决「逻辑重复执行、数据错乱」
高频触发会让业务逻辑重复运行，导致数据计算错误、状态混乱。✅ 适用场景：
- 表单提交按钮防重复点击
- 高频计算（如拖拽尺寸计算）
- 滚动到底部加载更多
举例：提交按钮防重复点击不做处理：用户狂点按钮，发起多次重复提交；加防抖：点击后等待 1 秒，期间再点都无效，只提交一次。
三、极简代码示例（一看就懂）
1. 防抖实现（搜索框专用）
javascript
运行
// 防抖函数
function debounce(fn, delay) {
let timer = null;
return function (...args) {
clearTimeout(timer); // 每次触发清空之前的定时器
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
// 使用：输入停止500ms后才发送请求
const search = debounce((value) => {
console.log("发送搜索请求：", value);
}, 500);
// 绑定输入事件
input.addEventListener("input", (e) => search(e.target.value));
2. 节流实现（滚动 / 拖拽专用）
javascript
运行
// 节流函数
function throttle(fn, interval) {
let lastTime = 0;
return function (...args) {
const now = Date.now();
if (now - lastTime >= interval) { // 达到间隔时间才执行
fn.apply(this, args);
lastTime = now;
}
};
}
// 使用：滚动时每隔300ms执行一次
const handleScroll = throttle(() => {
console.log("滚动位置：", window.scrollY);
}, 300);
window.addEventListener("scroll", handleScroll);
四、一句话区分：该用防抖还是节流？
表格
| 需求场景 | 选择 | 核心原因 |
|---|---|---|
| 搜索输入、表单验证、按钮点击 | 防抖 | 只需要「最后一次操作」的结果 |
| 页面滚动、拖拽、窗口缩放、高频点击 | 节流 | 需要「持续响应」，但不能太频繁 |
总结
- 防抖 = 等待停止后执行最后一次，专治「频繁触发、只需最终结果」的场景；
- 节流 = 固定频率执行，专治「持续触发、需要均匀响应」的场景；
- 它们能从根本上解决性能卡顿、请求泛滥、逻辑重复三大前端核心问题，所以是前端必备的优化方案。
