防抖和节流是前端优化高频事件的常用手段。防抖通过延迟执行，仅触发最后一次操作，适用于搜索框输入等场景；节流则保证函数在固定时间间隔内至少执行一次，适合滚动监听等持续触发的事件。两者核心区别在于执行频率控制策略不同，防抖关注最终状态，节流注重规律响应。
在前端开发中，频繁触发的事件如窗口滚动、输入框输入、鼠标移动等，容易导致性能问题。为了解决这类问题，防抖（Debounce）和节流（Throttle）是两种常用的优化手段。它们通过控制函数执行频率，减少不必要的调用，从而提升页面性能。
防抖函数原理与实现
防抖的核心思想是：当事件被频繁触发时，只执行最后一次操作。如果在等待时间内再次触发，则重新计时。
举个例子，用户在搜索框连续输入时，我们不希望每次按键都发起请求，而是等待用户停止输入一段时间后再执行搜索。这时就可以使用防抖。
防抖实现方式：
立即学习“Java免费学习笔记（深入）”；
利用 setTimeout 延迟执行函数，并在每次触发时清除之前的定时器，只有最后一次触发能真正执行。
function debounce(func, delay) {
let timer = null;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}使用示例：
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(function (e) {
console.log('搜索:', e.target.value);
}, 300));上述代码中，只有当用户停止输入300毫秒后，才会触发搜索操作。
节流函数原理与实现
节流的核心思想是：规定一个函数在一定时间间隔内最多只能执行一次。即使事件持续触发，函数也不会超过这个频率执行。
比如监听页面滚动事件，我们可能只需要每100毫秒更新一次位置信息，而不是每一次滚动都响应。
节流实现方式（时间戳版本）：
通过记录上次执行时间，判断当前时间是否超过了设定间隔，决定是否执行函数。
function throttle(func, delay) {
let lastTime = 0;
return function (...args) {
const now = Date.now();
if (now - lastTime >= delay) {
func.apply(this, args);
lastTime = now;
}
};
}使用示例：
window.addEventListener('scroll', throttle(function () {
console.log('页面滚动了');
}, 100));这样，无论滚动多快，函数每100毫秒最多执行一次。
防抖与节流的区别总结
- 防抖：适合“最后一次才重要”的场景，如搜索建议、按钮重复点击防护。
- 节流：适合“规律性执行”的场景，如滚动监听、窗口 resize、鼠标移动等高频事件。
- 防抖可能完全不执行中间状态，节流则会定期执行，保证响应频率。
实际应用中的注意事项
在真实项目中，可以结合框架或工具库使用更完善的实现，例如 Lodash 提供了 _.debounce 和 _.throttle 方法，支持额外配置如立即执行、取消等。
同时注意 this 指向和参数传递的正确性，在封装时使用 apply 或 call 绑定上下文。
基本上就这些。掌握防抖和节流，不仅能优化性能，还能提升用户体验。理解原理后，手写一个轻量版本并不复杂，但容易忽略细节，比如定时器清理、this 指向、立即执行需求等。
