防抖确保连续触发后只执行最后一次，适用于搜索框输入等场景；节流则按固定间隔执行，适合滚动监听等高频事件，二者均用于优化性能。
在处理高频触发事件时，比如窗口滚动、输入框输入、鼠标移动等，直接执行回调会带来性能问题。为了优化这类场景，函数防抖（Debounce）和节流（Throttle）是两种常用的技术手段。它们的核心目标是控制函数的执行频率，但实现原理和使用场景有所不同。
函数防抖（Debounce）原理
防抖的逻辑是：当事件被触发后，设置一个延迟执行的定时器；如果在延迟时间内事件再次被触发，就清除之前的定时器，重新开始计时。只有在连续触发结束后，过了指定等待时间还没有新触发，才会真正执行函数。
简单来说，防抖确保函数在一系列连续触发中只执行最后一次。
常见应用场景：搜索框输入联想、表单验证、按钮重复点击防护。
示例说明：- 用户在搜索框打字，每输入一个字符都会触发 input 事件。
- 使用防抖后，只有用户停止输入超过设定时间（如300ms），才发送请求获取搜索建议。
- 这样避免了每次输入都发请求，节省资源。
- 维护一个定时器变量。
- 每次触发函数时，先清除旧定时器。
- 重新设置新定时器，延迟执行目标函数。
节流（Throttle）原理
节流的逻辑是：规定一个单位时间，在这个时间内最多只执行一次函数。无论触发多少次，函数都按固定间隔执行。
换句话说，节流是“稀释”执行频率，让函数按照一定节奏执行，而不是频繁响应每一次触发。
典型应用：窗口滚动监听、屏幕resize、游戏中的按键频率限制。
示例说明：- 页面滚动时要更新元素位置或判断是否进入视口。
- 如果不节流，scroll事件可能每秒触发几十甚至上百次。
- 使用节流设为100ms执行一次，就能大幅降低计算压力，同时保证体验流畅。
- 时间戳方式：记录上次执行时间，每次触发时对比当前时间与上次执行时间的差值，超过指定间隔才执行。
- 定时器方式：设置一个定时器，若没有运行则启动，期间新触发会被忽略，直到定时结束才允许下一次执行。
代码实现示意（JavaScript）
以下是简易版的防抖和节流实现，便于理解原理。
防抖函数实现：
function debounce(func, wait) {
let timeout;
return function(...args) {
const context = this;
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), wait);
};
}
节流函数实现（定时器版）：
function throttle(func, wait) {
let timeout;
return function(...args) {
const context = this;
if (!timeout) {
timeout = setTimeout(() => {
timeout = null;
func.apply(context, args);
}, wait);
}
};
}
基本上就这些。理解防抖和节流的关键在于区分“最后一次执行”和“定期执行”的需求。根据具体场景选择合适的方式，能有效提升前端性能和用户体验。
