防抖（Debounce）和节流（Throttle）是前端开发中常用的两种性能优化技术，主要用于控制高频事件的触发频率，避免不必要的性能消耗。
1. 防抖（Debounce）
防抖的核心思想 ：在事件被触发后，等待一段时间（例如 n 毫秒），如果在这段时间内事件没有被再次触发，那么就执行事件处理函数。如果在这段时间内事件又被触发，则重新计时。
应用场景：输入框实时搜索、窗口大小调整、滚动事件等。
代码实现
javascript
function debounce(func, wait) {
let timeout;
return function(...args) {
const context = this;
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args);
}, wait);
};
}
// 示例：输入框防抖
const input = document.querySelector('input');
const debouncedSearch = debounce(function() {
console.log('Searching for:', input.value);
}, 300);
input.addEventListener('input', debouncedSearch);代码解析
debounce函数 ：接受两个参数，func是需要防抖的函数，wait是等待时间。timeout变量：用于存储定时器 ID。- 返回的函数：每次事件触发时，清除之前的定时器，并重新设置一个新的定时器。
func.apply(context, args)：在定时器结束后执行传入的函数，并确保this和参数的正确传递。
2. 节流（Throttle）
节流的核心思想 ：在一定时间间隔内（例如 n 毫秒），无论事件触发多少次，只执行一次事件处理函数。
应用场景：滚动加载、按钮点击、鼠标移动等。
代码实现
javascript
function throttle(func, wait) {
let lastTime = 0;
return function(...args) {
const now = Date.now();
if (now - lastTime >= wait) {
func.apply(this, args);
lastTime = now;
}
};
}
// 示例：滚动节流
const throttledScroll = throttle(function() {
console.log('Scrolling...');
}, 200);
window.addEventListener('scroll', throttledScroll);代码解析
throttle函数 ：接受两个参数，func是需要节流的函数，wait是时间间隔。lastTime变量：记录上一次执行函数的时间。- 返回的函数 ：每次事件触发时，检查当前时间与上一次执行时间的差值是否大于等于
wait，如果是则执行函数并更新lastTime。
3. 防抖与节流的区别
- 防抖：在事件停止触发后一段时间内执行一次函数。适合处理连续触发但只需要最后一次结果的情况。
- 节流：在一定时间间隔内执行一次函数。适合处理连续触发但需要均匀执行的情况。
4. 结合使用防抖和节流
在某些场景下，防抖和节流可以结合使用。例如，在滚动事件中，可以先使用节流来限制函数的执行频率，然后在滚动停止后再使用防抖来执行最终的操作。
javascript
function debounce(func, wait) {
let timeout;
return function(...args) {
const context = this;
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args);
}, wait);
};
}
function throttle(func, wait) {
let lastTime = 0;
return function(...args) {
const now = Date.now();
if (now - lastTime >= wait) {
func.apply(this, args);
lastTime = now;
}
};
}
const combinedScrollHandler = throttle(debounce(function() {
console.log('Scrolling stopped');
}, 300), 100);
window.addEventListener('scroll', combinedScrollHandler);代码解析
throttle包裹debounce：首先使用节流来限制函数的执行频率，然后在节流的基础上使用防抖来确保在滚动停止后执行最终的操作。combinedScrollHandler：在滚动过程中，每 100 毫秒检查一次是否需要执行函数，然后在滚动停止后 300 毫秒执行最终的操作。
总结
- 防抖：适合处理连续触发但只需要最后一次结果的情况。
- 节流：适合处理连续触发但需要均匀执行的情况。
- 结合使用：在某些复杂场景下，可以结合使用防抖和节流来达到更好的性能优化效果。
通过合理使用防抖和节流，可以有效减少不必要的函数调用，提升页面性能和用户体验。