前端知识速记：节流与防抖
什么是防抖？
防抖是一种控制事件触发频率的方法，通常用于处理用户频繁触发事件的场景。防抖的核心思想是将多个连续触发事件合并为一个事件，以减少执行次数。它在以下场景中特别有效：
- 输入框输入事件：实时搜索、输入验证等。
- 窗口调整大小（resize）事件：减少窗口大小变化时的处理频率。
防抖的实现
防抖的实现依赖于计时器。每次触发事件时，都会重置计时器，只有在事件停止触发一定时间后才执行该事件处理函数。
function debounce(fn, delay) {let timer = null;return function(...args) {if (timer) clearTimeout(timer);timer = setTimeout(() => {fn.apply(this, args);}, delay);};
}// 使用示例
const input = document.getElementById('input');
input.addEventListener('input', debounce(() => {console.log('用户输入:', input.value);
}, 300));
在这个例子中，输入事件会在用户停止输入后 300 毫秒触发，避免了频繁的输出。
什么是节流？
节流与防抖的目标相似，但其实现方式有所不同。节流是指限制事件的触发频率，保证在一定时间内事件只会执行一次。节流特别适合以下场景：
- 滚动监听：限制滚动事件的处理，避免性能瓶颈。
- 定时器定时执行任务：实现定期执行的功能。
节流的实现
节流可以通过时间戳或定时器实现。这里展示使用时间戳进行节流的示例：
function throttle(fn, limit) {let lastTime = 0;return function(...args) {const now = Date.now();if (now - lastTime >= limit) {lastTime = now;fn.apply(this, args);}};
}// 使用示例
window.addEventListener('scroll', throttle(() => {console.log('用户在滚动');
}, 500));
在这个例子中，用户滚动事件的处理函数每 500 毫秒最多触发一次，以减少计算量和提高性能。
节流与防抖的区别
- 触发时机：防抖在事件触发后的一段时间内若再次触发则会重新计时，保证事件只执行一次；而节流是保证在一定时间内只执行一次，无论事件触发了多少次。
- 适用场景：防抖适用于用户输入等需要等待用户停止操作的场景；节流适用于需要在一定时间内持续操作的场景，例如滚动或窗口缩放。
