防抖（Debouncing）和节流（Throttling）都是用来控制函数的执行频率，尤其是在处理高频率的事件（如滚动、窗口调整大小、输入框输入等）时，能够提高性能和用户体验。两者的实现原理和适用场景略有不同。
防抖（Debouncing）
定义
防抖是指在用户触发事件之后，如果在一定的时间内没有再次触发该事件，则执行相应的操作。如果在这段时间内再次触发了事件，则重新计时。简单来说，就是只有当连续的事件停止后，才会执行一次函数。
适用场景
- 输入框实时搜索
- 防止表单重复提交
- 窗口调整大小
实现
以下是 JavaScript 中防抖的一个简单实现：
function debounce(func, delay) {
let timeout;
return function(...args) {
const context = this;
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args);
}, delay);
};
}
节流（Throttling）
定义
节流是指限制某个操作在一定时间内只能执行一次，无论时间内用户触发了多少次事件。简单来说，就是在一定时间间隔内，只会执行一次。
适用场景
- 滚动加载（Infinite Scroll）
- 频繁的按钮点击
- 定期发送心跳包（如 WebSocket）
实现
以下是 JavaScript 中节流的一个简单实现：
function throttle(func, interval) {
let lastTime = 0;
return function(...args) {
const context = this;
const currentTime = Date.now();
if (currentTime - lastTime >= interval) {
lastTime = currentTime;
func.apply(context, args);
}
};
}
区别总结
- 防抖：优化在快速连续触发的场景，只有在停止触发后才执行一次。
- 节流：优化在高频事件中，规定时间内只能执行一次。
通过选择合适的方法，可以有效提高Web应用的性能和用户体验。
