防抖（Debouncing）与节流（Throttling）介绍及比较
在前端开发中，防抖（Debouncing）和节流（Throttling）是两种常用的优化高频事件（如滚动、窗口大小调整、键盘输入等）处理函数的性能的技术。它们的主要区别在于触发事件处理的时机和频率。
防抖（Debouncing）
防抖技术会延迟函数的执行，直到事件停止触发一定时间后才执行函数。如果在这段时间内事件再次被触发，则会重新计时。防抖常用于搜索框输入、窗口大小调整等场景，以减少不必要的计算或请求。
特点：
- 确保事件处理函数在事件停止触发后执行。
- 只在最后一次事件触发后执行。
示例代码：
function debounce(func, wait) { let timeout; return function() { const context = this, args = arguments; clearTimeout(timeout); timeout = setTimeout(() => func.apply(context, args), wait); };
} // 使用示例
const search = debounce(function(query) { console.log('Searching for:', query);
}, 300); // 假设这是输入框的input事件处理函数
document.getElementById('searchBox').addEventListener('input', function(e) { search(e.target.value);
});节流（Throttling）
节流技术会确保事件处理函数在特定时间间隔内只执行一次。如果在这个时间间隔内事件被多次触发，只有第一次或最后一次会执行。节流常用于滚动监听、动画等场景，以避免处理函数执行得过于频繁。
特点：
- 确保事件处理函数在特定时间间隔内只执行一次。
- 可以是第一次触发时执行，也可以是最后一次触发时执行（取决于实现方式）。
示例代码（以第一次触发时执行为例）：
function throttle(func, limit) { let lastFunc; let lastRan; return function() { const context = this; const args = arguments; if (!lastRan) { func.apply(context, args); lastRan = Date.now(); } else { clearTimeout(lastFunc); lastFunc = setTimeout(function() { if ((Date.now() - lastRan) >= limit) { func.apply(context, args); lastRan = Date.now(); } }, limit - (Date.now() - lastRan)); } };
} // 使用示例
const scrollHandler = throttle(function() { console.log('Scroll event handler called');
}, 250); window.addEventListener('scroll', scrollHandler);注意：上面的节流实现是确保在指定时间间隔内至少执行一次（首次触发时立即执行）。如果需要确保在间隔结束时执行（即忽略中间的触发，只处理最后一次），则需要另一种实现方式。
总结
- 防抖适用于需要减少高频事件触发次数的场景，如搜索框输入。
- 节流适用于需要控制事件处理函数执行频率的场景，如滚动监听。
选择使用哪种技术取决于具体的应用场景和需求。
