2.防抖和节流**
防抖和节流是前端开发中常用的优化技术，用于限制事件处理函数的执行频率，提高页面性能和用户体验。
防抖（debounce）指的是在事件被触发 n 秒后再执行回调函数，如果在这 n 秒内又触发了事件，则重新计时。也就是说，当一个事件持续触发时，只有在停止触发一段时间后才会执行回调函数，从而减少了回调函数的执行次数。常用于搜索框输入，只有在用户停止输入一段时间后才触发搜索请求。
节流（throttle）指的是每隔一段时间执行一次回调函数。也就是说，当一个事件持续触发时，只有在指定时间间隔内执行一次回调函数，从而限制了回调函数的执行频率。常用于页面滚动、窗口大小变化等频繁触发的事件，以减少事件处理函数的执行次数。
实现防抖和节流的方法有很多，其中比较常见的是使用 setTimeout 函数和时间戳。使用 setTimeout 实现防抖和节流时，可以在事件触发后设置一个定时器，在定时器到期后执行回调函数；使用时间戳实现防抖和节流时，则可以记录上一次事件触发的时间戳，当两次事件触发的时间间隔超过指定时间时，执行回调函数。
防抖
function debounce(func, delay) {
let timerId;
return function (...args) {
clearTimeout(timerId);
timerId = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
// 使用示例
function handleInput() {
console.log('Input debounced');
}
const debouncedHandleInput = debounce(handleInput, 300);
// 在输入框输入时触发
inputElement.addEventListener('input', debouncedHandleInput);
节流
function throttle(func, delay) {
let isThrottled = false;
return function (...args) {
if (!isThrottled) {
func.apply(this, args);
isThrottled = true;
setTimeout(() => {
isThrottled = false;
}, delay);
}
};
}
// 使用示例
function handleScroll() {
console.log('Scroll throttled');
}
const throttledHandleScroll = throttle(handleScroll, 200);
// 监听滚动事件
window.addEventListener('scroll', throttledHandleScroll);
