防抖（Debounce）和节流（Throttle）是两种常用的优化技术，主要用于控制高频率的事件触发，如滚动、输入、窗口调整大小等。本文将深入探讨防抖与节流的原理、实现方法及其应用场景。
简单场景就是：输入框防抖，滚动节流
1. 防抖（Debounce）
防抖是一种在事件频繁触发时，通过延迟执行来减少事件触发次数的技术。防抖的核心思想是：当事件被触发时，不立即执行处理函数，而是设置一个定时器，如果在定时器未结束前再次触发事件，则重新开始计时。这样可以确保在一定时间内只执行一次事件处理函数。
实现原理：
function debounce(func, wait) {
let timeout;
return function(...args) {
const context = this;
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), wait);
};
}示例应用：
在搜索框输入时，实时发送请求获取搜索建议。如果不进行防抖处理，每次输入都会发送请求，造成服务器压力和资源浪费。通过防抖可以优化这种场景：
const searchInput = document.getElementById('search');
const handleSearch = debounce((event) => {
console.log('Fetching search results for:', event.target.value);
// 发送搜索请求
}, 300);
searchInput.addEventListener('input', handleSearch);2. 节流（Throttle）
节流是一种在事件频繁触发时，通过限制函数执行频率来减少事件处理次数的技术。节流的核心思想是：在规定的时间间隔内只执行一次事件处理函数，不论期间事件触发了多少次。
实现原理：
function throttle(func, limit) {
let inThrottle;
return function(...args) {
const context = this;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
};
}示例应用：
在页面滚动时，实时计算滚动位置以显示回到顶部按钮。如果不进行节流处理，滚动事件会频繁触发，导致性能问题。通过节流可以优化这种场景：
const handleScroll = throttle(() => {
console.log('Scroll position:', window.scrollY);
// 处理滚动事件
}, 200);
window.addEventListener('scroll', handleScroll);3. 防抖与节流的选择
防抖和节流虽然都是用于控制高频事件，但它们的应用场景有所不同：
- 防抖：适用于频繁触发但只需最后一次结果的场景，如搜索输入、窗口大小调整等。
- 节流：适用于持续触发但需要定期执行的场景，如滚动事件、窗口滚动位置计算等。
4. 深入优化
立即执行版防抖：
有时我们希望在事件触发时立即执行一次，然后再进行防抖控制，可以在防抖函数中添加一个立即执行选项：
function debounce(func, wait, immediate) {
let timeout;
return function(...args) {
const context = this;
const callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(() => {
timeout = null;
if (!immediate) func.apply(context, args);
}, wait);
if (callNow) func.apply(context, args);
};
}带有标识的节流：
有时我们希望在节流过程中能够获取到当前的状态，可以在节流函数中添加一个标识：
function throttle(func, limit) {
let inThrottle;
return function(...args) {
const context = this;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
};
}5. 综合应用
在实际开发中，防抖与节流可以结合使用。例如在一个实时搜索的页面中，用户输入时进行防抖处理，而在结果展示时进行节流处理，以优化整体性能。
const searchInput = document.getElementById('search');
const resultsContainer = document.getElementById('results');
const fetchResults = debounce((query) => {
console.log('Fetching results for:', query);
// 模拟搜索请求
setTimeout(() => {
resultsContainer.innerHTML = `Results for: ${query}`;
}, 500);
}, 300);
const handleScroll = throttle(() => {
console.log('Scroll position:', window.scrollY);
// 处理滚动事件
}, 200);
searchInput.addEventListener('input', (event) => {
fetchResults(event.target.value);
});
window.addEventListener('scroll', handleScroll);防抖与节流是前端性能优化中的两项重要技术，通过合理地应用这两种技术，可以显著减少高频事件带来的性能问题，提升用户体验。其他性能优化技术，如代码分割、异步加载、懒加载等，后续介绍。