防抖（Debounce）和节流（Throttle）是两种常见的优化技术，主要用于控制函数执行频率，特别是在处理高频事件（如滚动、输入等）时。它们的具体含义和使用场景如下：
一 防抖（Debounce）
概念：防抖是指在一定时间内多次触发事件时，只执行最后一次事件。换句话说，只有在事件停止触发后，才会执行指定的函数。
1 使用场景：
搜索框输入建议：用户输入时，只有在停止输入一段时间后才发起搜索请求。
窗口调整大小：在窗口大小调整停止后，再执行相应的处理。
示例代码：
function debounce(func, delay) {let timer;return function(...args) {clearTimeout(timer);timer = setTimeout(() => {func.apply(this, args);}, delay);};
}// 使用示例
const handleResize = debounce(() => {console.log('窗口调整大小');
}, 200);window.addEventListener('resize', handleResize);
2 输入框实时搜索
假设我们有一个搜索输入框，我们希望在用户停止输入后再进行搜索请求。
<input type="text" id="search" placeholder="搜索..." /><script>
function debounce(func, delay) {let timer;return function(...args) {clearTimeout(timer);timer = setTimeout(() => {func.apply(this, args);}, delay);};
}function performSearch(query) {console.log('Searching for:', query);// 这里可以发起实际的搜索请求
}const input = document.getElementById('search');
input.addEventListener('input', debounce((event) => {performSearch(event.target.value);
}, 300));
</script>二 节流（Throttle）
概念：节流是指在一定时间内，只允许一次事件触发。无论事件触发的频率有多高，都会按固定时间间隔执行函数。
1 使用场景：
滚动监听：在用户滚动页面时，限制某个操作的执行频率。
按钮点击：防止用户快速多次点击按钮。
示例代码：
function throttle(func, delay) {let lastTime = 0;return function(...args) {const now = Date.now();if (now - lastTime >= delay) {lastTime = now;func.apply(this, args);}};
}// 使用示例
const handleScroll = throttle(() => {console.log('页面滚动');
}, 200);window.addEventListener('scroll', handleScroll);
2 按钮点击
// 1.封装节流函数function throttle(fn, delay) {//3. 通过闭包保存一个 "节流阀" 默认为falselet flag= false;return function () {//8.触发事件被调用 判断"节流阀" 是否为true 如果为true就直接trurn出去不做任何操作if (flag) {return;} else {//4. 如果节流阀为false 立即将节流阀设置为trueflag= true; //节流阀设置为true//5. 开启定时器setTimeout(() => {//6. 将外部传入的函数的执行放在setTimeout中fn.apply(this, arguments);//7. 最后在setTimeout执行完毕后再把标记'节流阀'为false(关键) 表示可以执行下一次循环了。当定时器没有执行的时候标记永远是true，在开头被return掉flag= false;}, delay);}};}function handleClick() {// 打印当前 document 的宽高console.log("按钮被点击了");}const throttledClickHandler = throttle(handleClick, 300);// 模拟按钮点击setInterval(throttledClickHandler, 100); // 每100毫秒模拟一次点击
三 总结
节流：在特定时间间隔内，只允许函数执行一次，适用于频繁触发的事件（如滚动、窗口调整大小）。例如，每300毫秒触发一次。
防抖：在事件触发后延迟执行函数，只有在事件停止触发后才执行，适用于用户输入等场景（如搜索框输入）。例如，输入停止后200毫秒再执行。
- 防抖 (Debounce)
定义：防抖是延迟执行一个函数，只有在事件停止触发后才会执行。适合处理低频事件。
执行机制：每次触发事件时，都会重置计时器，只有在最后一次触发后经过设定的时间，函数才会执行。
使用场景：
- 输入框实时搜索：防止频繁请求。
- 窗口失去焦点：处理输入结束时的逻辑。
效果：在用户停止输入后才执行，提高效率。
- 节流 (Throttle)
定义：节流是限制一个函数在一定时间内只能执行一次，适用于高频率的事件。
执行机制：在设定的时间间隔内，无论触发事件多少次，函数只会执行一次。
使用场景：
- 滚动事件：控制滚动时的性能。
- 窗口调整大小：限制重绘的次数。
效果：提供持续的反馈，如滚动时可以持续获取位置。