防抖（Debouncing）和节流（Throttling）是两种常见的前端优化技术，用于控制事件触发频率，提升页面性能和用户体验。尽管它们的目的相似，但在实现原理和应用场景上有所不同。在本文中，我将详细介绍防抖和节流的区别，并提供相应的示例代码，以帮助读者更好地理解它们的作用和用法。
1. 防抖（Debouncing）
1.1. 概述
防抖是一种技术，用于延迟执行事件处理函数，直到事件停止触发一段时间后。当触发事件时，如果在指定的时间内再次触发了相同事件，则重新计时，直到事件停止触发，才执行事件处理函数。
1.2. 实现原理
防抖的实现原理是通过设置一个定时器，在事件触发时先清除之前的定时器，然后重新设置新的定时器，在延迟时间内如果再次触发了相同事件，则重新计时。
1.3. 应用场景
- 输入框搜索：用户在输入框中连续输入字符时，延迟一段时间后执行搜索操作，避免频繁发送请求。
- 窗口调整：当窗口大小调整时，延迟一段时间后执行重新布局或重绘操作，减少不必要的重绘。
1.4. 示例代码
function debounce(func, delay) {
let timer;
return function() {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, arguments);
}, delay);
};
}
// 使用防抖函数包装事件处理函数
const debouncedFunc = debounce(() => {
console.log('Input debounced');
}, 300);
// 添加事件监听器
document.getElementById('inputBox').addEventListener('input', debouncedFunc);
2. 节流（Throttling）
2.1. 概述
节流是一种技术，用于限制事件处理函数的触发频率，在一定时间内只允许事件处理函数执行一次。无论事件触发多频繁，都只会执行一次事件处理函数。
2.2. 实现原理
节流的实现原理是通过设置一个标记变量，在事件触发时先判断标记变量是否为真，如果为真则立即执行事件处理函数，并将标记变量置为假，然后通过定时器在指定时间后将标记变量重新置为真。
2.3. 应用场景
- 页面滚动：当页面滚动时，限制事件处理函数的执行频率，减少滚动事件的处理次数。
- 按钮点击：当按钮被点击时，限制事件处理函数的执行频率，防止用户频繁点击造成误操作。
2.4. 示例代码
function throttle(func, delay) {
let canRun = true;
return function() {
if (!canRun) return;
canRun = false;
setTimeout(() => {
func.apply(this, arguments);
canRun = true;
}, delay);
};
}
// 使用节流函数包装事件处理函数
const throttledFunc = throttle(() => {
console.log('Scroll throttled');
}, 300);
// 添加事件监听器
window.addEventListener('scroll', throttledFunc);
3. 区别
3.1. 触发频率
- 防抖： 只有当事件停止触发一段时间后才执行事件处理函数，不管事件触发频率多高，只会执行一次。
- 节流： 在一定时间内只允许事件处理函数执行一次，无论事件触发频率多高，每隔一段时间就会执行一次事件处理函数。
3.2. 执行时机
- 防抖： 在事件停止触发一段时间后才执行事件处理函数。
- 节流： 事件处理函数在一定时间内定期执行，保证了事件处理函数的执行频率。
3.3. 应用场景
- 防抖： 适用于需要延迟执行的操作，如输入框搜索、窗口调整等。
- 节流： 适用于限制事件处理函数的触发频率，如页面滚动、按钮点击等。
4. 总结
本文详细介绍了防抖和节流两种前端优化技术的原理、应用场景和实现方法。防抖用于延迟执行事件处理函数，直到事件停止触发一段时间后执行；节流用于限制事件处理函数的触发频率，在一定时间内只允许执行一次。通过合理使用防抖和节流技术，可以有效地提升页面性能和用户体验。
