JavaScript 函数防抖与节流：从原理到实战，彻底掌握性能优化利器
在前端开发中，我们经常会遇到一些高频触发的事件，比如 keyup、scroll、resize、mousemove 等。如果直接在这些事件回调中执行耗时操作（如 AJAX 请求、网络图片加载、复杂计算），就会导致浏览器频繁执行任务，严重影响页面性能，甚至造成卡顿或“帕金森式抖动”。
为了解决这个问题，函数防抖（debounce） 和 函数节流（throttle） 成为了前端性能优化的两大经典手段。它们的核心目标都是减少不必要的函数执行次数，但实现思路和适用场景有所不同。
本文将从实际需求出发，深入讲解防抖和节流的原理、区别、实现方式以及典型应用场景，帮助你彻底掌握这两项“八股文”级别的必考知识点。
为什么需要防抖和节流？
想象一下以下场景：
- 用户在百度搜索框快速输入关键词，希望实时看到搜索建议（Ajax Suggest）。
- 代码编辑器中输入代码时，需要实时触发代码补全或语法检查。
- 页面滚动时加载更多内容（无限滚动）。
- 窗口 resize 时重新计算布局。
这些操作有一个共同特点：事件触发非常频繁。如果每次事件都立即执行耗时任务，会带来两个问题：
- 性能开销过大：频繁发送 AJAX 请求、执行 DOM 操作或复杂计算，会占用大量 CPU 和网络资源。
- 用户体验差：响应太慢会让用户感觉卡顿，太快又浪费资源。
防抖和节流正是为了在性能与用户体验之间找到平衡点。
防抖（Debounce）：只执行最后一次
核心思想
“管你触发多少次，我只认最后一次。”
在规定时间内（delay），如果事件持续被触发，就不断推迟执行时间。只有当事件停止触发超过 delay 时间后，才真正执行一次回调函数。
典型比喻：坐电梯。如果有人不断按按钮，电梯会一直等待，直到一段时间内没人再按，才会关门出发。
适用场景
- 搜索框输入：用户快速输入关键词时，不需要每次都发请求。只有当用户停止输入一段时间后，才发送一次请求获取搜索建议（百度、淘宝搜索框）。
- 表单验证：实时校验用户名是否可用，但不希望用户每输入一个字符就发一次请求。
- 代码补全：编辑器中输入代码时触发建议，只有停顿时才请求。
防抖实现原理（闭包 + 定时器）
防抖的核心依赖 闭包 保存定时器 ID，以便在下次触发时清除之前的定时器。
function debounce(fn, delay) {
let timer = null; // 闭包中保存的自由变量
return function(...args) {
const context = this;
// 每次触发都先清除之前的定时器
if (timer) {
clearTimeout(timer);
}
// 重新设置定时器
timer = setTimeout(() => {
fn.apply(context, args);
timer = null; // 可选：执行后清空
}, delay);
};
}
关键点解析：
- 使用闭包保存
timer，确保每次调用都能访问并清除上一次的定时器。 - 每次事件触发都重新开始“倒计时”。
- 只有最后一次触发后的 delay 时间内没有新事件，才会执行函数。
完整示例：搜索框防抖
<input type="text" id="debounce-input" placeholder="输入关键词搜索建议..." />
<script>
function ajaxSearch(content) {
console.log('发送搜索请求：', content);
// 实际中这里是 fetch 或 axios 请求
}
const debounceSearch = debounce(ajaxSearch, 500);
document.getElementById('debounce-input').addEventListener('keyup', function(e) {
debounceSearch(e.target.value);
});
</script>
用户快速输入“JavaScript”时，只有在停止输入 500ms 后，才会发送一次请求。
节流（Throttle）：每隔一段时间执行一次
核心思想
“无论你触发多频繁，我每隔固定时间只执行一次。”
节流保证在指定时间段内最多执行一次函数。即使事件触发再密集，也不会超过设定频率。
典型比喻：游戏中的射击冷却时间。即使你一直按着鼠标，也只能按固定射速发射子弹（FPS 游戏射速限制）。
适用场景
- 滚动事件：页面滚动加载更多内容，或监听滚动位置显示“返回顶部”按钮。
- mousemove：鼠标拖拽、画板绘制等，需要实时反馈但不需要太高频率。
- 高频点击：防止按钮重复提交（虽可用 disabled，但节流更优雅）。
- 窗口 resize：实时调整布局，但不需要每像素变化都计算。
节流实现原理（时间戳 + 定时器混合版）
常见的节流实现有两种：时间戳版（立即执行）和定时器版（延迟执行）。生产中多采用混合版，兼具两者优点：第一次立即执行，之后严格控制频率，最后一次也能执行。
function throttle(fn, delay) {
let last = 0; // 上一次执行时间戳
let deferTimer = null;
return function(...args) {
const context = this;
const now = Date.now();
// 如果距离上次执行不足 delay，则进入延迟执行逻辑
if (last && now < last + delay) {
// 清除上一次的延迟定时器
clearTimeout(deferTimer);
// 设置新的延迟执行，确保停止触发后还能执行最后一次
deferTimer = setTimeout(() => {
last = now;
fn.apply(context, args);
}, delay);
} else {
// 足够时间间隔，立即执行
last = now;
fn.apply(context, args);
}
};
}
关键点解析：
- 使用
last记录上次执行时间。 - 如果当前时间与上次执行间隔不足 delay，则推迟到 delay 后执行（保证最后一次能执行）。
- 否则立即执行，并更新 last。
完整示例：滚动加载更多
<div id="scroll-container" style="height: 300px; overflow-y: scroll;">
<!-- 大量内容 -->
</div>
<script>
function loadMore() {
console.log('加载更多数据...');
// 实际中 append 新内容
}
const throttleLoad = throttle(loadMore, 500);
document.getElementById('scroll-container').addEventListener('scroll', function() {
const el = this;
if (el.scrollTop + el.clientHeight >= el.scrollHeight - 50) {
throttleLoad();
}
});
</script>
即使用户疯狂滚动，也最多每 500ms 触发一次加载。
防抖 vs 节流：核心区别总结
| 特性 | 防抖 (debounce) | 节流 (throttle) |
|---|---|---|
| 执行时机 | 只执行最后一次（停止触发后） | 每隔固定时间执行一次 |
| 实现方式 | setTimeout + clearTimeout | 时间戳 或 定时器混合 |
| 第一次执行 | 延迟执行 | 立即执行（时间戳版） |
| 最后一次执行 | 一定能执行 | 混合版能保证执行 |
| 典型场景 | 输入搜索、表单验证 | 滚动加载、鼠标移动、resize |
| 比喻 | 电梯等没人再按才关门 | 游戏射击有固定射速 |
一句话总结：
- 防抖：关注“停止后做一件事”。
- 节流：关注“每隔一段时间做一件事”。
完整对比 Demo：三输入框直观感受
下面是一个完整可运行的 HTML 示例，直观对比无处理、防抖、节流三种情况：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>防抖与节流对比</title>
</head>
<body>
<p>无处理（频繁请求）：<input type="text" id="undebounce"></p>
<p>防抖 500ms：<input type="text" id="debounce"></p>
<p>节流 500ms：<input type="text" id="throttle"></p>
<script>
function ajax(content) {
console.log('ajax request:', content);
}
function debounce(fn, delay) {
let timer = null;
return function(...args) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}
function throttle(fn, delay) {
let last = 0, deferTimer;
return function(...args) {
const now = Date.now();
if (last && now < last + delay) {
clearTimeout(deferTimer);
deferTimer = setTimeout(() => {
last = now;
fn.apply(this, args);
}, delay);
} else {
last = now;
fn.apply(this, args);
}
};
}
const undebounce = document.getElementById('undebounce');
const debounceInput = document.getElementById('debounce');
const throttleInput = document.getElementById('throttle');
undebounce.addEventListener('keyup', e => ajax(e.target.value));
debounceInput.addEventListener('keyup', e => debounce(ajax, 500)(e.target.value));
throttleInput.addEventListener('keyup', e => throttle(ajax, 500)(e.target.value));
</script>
</body>
</html>
打开浏览器控制台快速输入，你会明显看到：
- 第一个输入框：控制台疯狂打印（性能灾难）。
- 第二个输入框：只在停止输入 500ms 后打印一次。
- 第三个输入框：大约每 500ms 打印一次。
进阶：立即执行的防抖、带 trailing/leading 选项
lodash 等成熟库提供的 debounce/throttle 支持更多选项：
leading：是否在延迟前执行一次（默认 false）。trailing：是否在延迟后执行一次（默认 true）。maxWait：防抖最大等待时间。
实际项目中推荐直接使用 lodash 或自己封装带选项的版本，避免边界问题。
总结
防抖和节流是前端性能优化的基石，也是面试中高频考察点。掌握它们不仅能写出更高效的代码，还能体现你对浏览器事件机制和用户体验的深刻理解。
记住核心原则：
- 频繁触发但只需要最后结果 → 用 防抖。
- 频繁触发但需要保持一定频率响应 → 用 节流。
熟练运用这两项技术，你的页面将告别“帕金森”，迎来丝滑体验！
