防抖例题：力扣2627
前端开发中，防抖（Debouncing）和节流（Throttling）是两种常用的优化技术，用于限制函数在短时间内被频繁调用，以提高页面性能，尤其是在处理高频事件如窗口调整（resize）、滚动（scroll）、键盘事件（keyup）等时非常有用。
防抖（Debouncing）
防抖技术确保函数在特定的时间内不再被调用后，才执行一次。常见的场景是用户在输入框中输入文字时，不是每输入一个字符就执行一次处理函数，而是当用户停止输入一段时间后才执行，这样可以减少不必要的计算和请求。
工作原理：
- 当事件触发时，并不立即执行目标函数，而是延迟一段时间执行。
- 如果在这个延迟时间内事件再次被触发，则重新计时。
应用场景： - 输入框连续输入文字时的校验。
- 按钮连续点击防止多次提交。
节流（Throttling）
节流技术则是确保函数以固定的频率被调用。与防抖不同，节流不管事件触发有多频繁，都会按照设定的时间间隔执行函数。
工作原理：
- 当事件触发时，会执行目标函数。
- 在目标函数执行后的一段时间内，如果事件再次被触发，则不会执行目标函数。
应用场景： - 窗口调整（resize）时避免过多的计算。
- 滚动（scroll）事件的处理。
代码示例
以下是一个简单的防抖和节流的JavaScript实现示例：
// 防抖函数
function debounce(func, wait) {let timeout;return function() {const context = this;const args = arguments;clearTimeout(timeout);timeout = setTimeout(function() {func.apply(context, args);}, wait);};
}
// 节流函数
function throttle(func, limit) {let inThrottle;return function() {const args = arguments;const context = this;if (!inThrottle) {func.apply(context, args);inThrottle = true;setTimeout(() => inThrottle = false, limit);}};
}
通过防抖和节流技术，可以有效减少不必要的资源消耗，提升用户体验和前端性能。