Debounce 和 Throttle 是前端开发中常用的优化技巧，用于控制函数的触发频率，提升页面性能和用户体验。
Debounce 的原理是在指定的时间内，只执行最后一次触发的函数。当用户频繁操作时，可以使用 Debounce 来降低函数的执行频率，减少不必要的请求或计算。比如在搜索输入框中，当用户输入时，可以使用 Debounce 来延迟搜索请求，只在用户停止输入后，才发送请求。
实现 Debounce 的一种常见方法是使用定时器。我们可以通过在函数中设置一个定时器，在指定的时间内清除之前的定时器，然后再设置一个新的定时器。这样就能保证最后一次触发的函数能在指定的时间过后执行。下面是一个示例代码：
```javascript
function debounce(func, wait) {
let timer;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, wait);
};
}
// 使用 debounce 包装需要延迟执行的函数
const debouncedFunc = debounce(() => {
console.log('Debounced function executed');
}, 300);
// 触发函数
debouncedFunc(); // 函数不会立即执行，而是等待 300ms 后执行
```
Throttle 的原理是在指定的时间内，最多执行一次函数。当用户频繁触发函数时，可以使用 Throttle 来控制函数的执行频率，避免过多的计算或请求。比如在页面滚动时，可以使用 Throttle 来限制滚动事件的触发频率，避免频繁触发滚动回调函数。
实现 Throttle 的一种常见方法是使用时间戳。我们可以通过记录上次函数执行的时间戳，在指定的时间间隔内判断是否可以执行函数。下面是一个示例代码：
```javascript
function throttle(func, wait) {
let previous = 0;
return function(...args) {
const now = Date.now();
if (now - previous > wait) {
func.apply(this, args);
previous = now;
}
};
}
// 使用 throttle 包装需要限制频率的函数
const throttledFunc = throttle(() => {
console.log('Throttled function executed');
}, 300);
// 触发函数
throttledFunc(); // 函数会立即执行
```
以上是 Debounce 和 Throttle 的基本实现方法，在实际开发中，还可以根据具体需求进行适当的优化和扩展。比如可以通过配置参数来决定是使用时间戳还是定时器，或者实现 Leading 和 Trailing 的方式来控制函数的执行时机。通过灵活运用 Debounce 和 Throttle，可以提升前端应用的性能和用户体验。
