JavaScript的防抖（Debouncing）和节流（Throttling）是两种用于优化高频率事件处理的常见技术。它们都可以限制事件的触发频率，以减少过度触发事件处理函数而导致的性能问题。
防抖（Debouncing）
防抖是指在事件被触发后，等待一定时间再执行事件处理函数。如果在等待时间内事件再次被触发，那么就重新计时。
这样可以避免事件处理函数过于频繁地执行，只有当事件暂停一段时间后，才会真正执行一次事件处理函数。
常见的应用场景：
- 浏览器窗口大小调整：当用户频繁调整窗口大小时，通过防抖可以避免频繁地重绘页面。
- 搜索框输入：在用户输入时，等待用户暂停输入后再进行搜索请求，减少请求次数。
实例代码：
function debounce(func, delay) {
let timerId;
return function (...args) {
clearTimeout(timerId);
timerId = setTimeout(() => func.apply(this, args), delay);
};
}
// 使用防抖包装事件处理函数
const debouncedEventHandler = debounce(function () {
// 在这里编写事件处理逻辑
}, 300);
节流（Throttling）
节流是指在事件被触发后，固定时间内只执行一次事件处理函数。即使事件被触发多次，在规定的时间间隔内，也只会执行一次事件处理函数。
常见的应用场景：
- 滚动事件：当用户滚动页面时，通过节流来限制处理滚动事件的频率，减少滚动事件处理函数的调用次数。
- 点击事件：当用户快速点击按钮时，通过节流来限制点击事件处理函数的执行，防止多次点击导致的问题。
实例代码：
function throttle(func, delay) {
let isThrottled = false;
return function (...args) {
if (!isThrottled) {
func.apply(this, args);
isThrottled = true;
setTimeout(() => (isThrottled = false), delay);
}
};
}
// 使用节流包装事件处理函数
const throttledEventHandler = throttle(function () {
// 在这里编写事件处理逻辑
}, 300);