- 防抖（Debounce）：
防抖的思想是，在指定的时间间隔内，只执行最后一次触发的函数调用。如果在这段时间间隔内又有触发事件发生，会重新开始计时。这样可以有效地降低函数的执行次数。
实现防抖的常见做法是通过设置一个定时器，在触发事件后，延迟一段时间后执行函数。如果在延迟时间内再次触发事件，就清除之前的定时器，并重新设置新的定时器。
下面是一个防抖的示例代码：
function debounce(func, delay) {
let timer;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
// 使用防抖函数
const debouncedFn = debounce(() => {
// 执行的函数逻辑
}, 500);
// 在事件处理中应用防抖
element.addEventListener('input', debouncedFn);
- 节流（Throttle）：
节流的思想是，在指定的时间间隔内，无论触发事件多少次，只执行一次函数调用。可以控制函数的执行频率。
实现节流的常见做法是通过设置一个定时器，在函数调用后的指定时间间隔内，禁止再次执行函数。
下面是一个节流的示例代码：
function throttle(func, delay) {
let timer;
let canRun = true;
return function(...args) {
if (!canRun) {
return;
}
canRun = false;
timer = setTimeout(() => {
func.apply(this, args);
canRun = true;
}, delay);
};
}
// 使用节流函数
const throttledFn = throttle(() => {
// 执行的函数逻辑
}, 500);
// 在事件处理中应用节流
element.addEventListener('scroll', throttledFn);
需要注意的是，防抖和节流的使用场景不同。防抖适用于需要在事件停止触发后执行一次函数的场景，例如搜索输入框的输入事件，当用户停止输入一段时间后再进行搜索。节流适用于需要在一定时间间隔内执行函数的场景，例如页面滚动事件，限制事件的触发频率。根据具体的需求，选择合适的优化方式可以提升用户体验和性能。
