在前端开发中，处理频繁的事件触发是一项常见任务，例如窗口的 resize、页面滚动的 scroll 事件、用户输入的 keyup 或 keydown 事件等。如果不加以控制，这些事件会频繁触发，从而导致性能问题。因此，防抖（Debounce）和节流（Throttle）这两种技术就显得尤为重要。本文将详细介绍防抖和节流的概念、区别、应用场景以及实现方法。
一、防抖（Debounce）
1.1 什么是防抖？
防抖是一种延迟执行的技术。它的原理是，当事件被触发时，延迟执行事件处理函数，并且在延迟时间内如果事件再次被触发，则重新开始计时。只有当事件在指定的时间内没有再次触发，事件处理函数才会执行。这样可以避免某些高频率的操作被频繁触发，从而提高性能。
1.2 适用场景
防抖主要适用于那些在用户停止操作后才需要执行的场景，例如：
- 搜索输入框：用户在输入时，连续触发
keyup事件，只有在输入结束后才发送请求。 - 窗口调整：用户调整浏览器窗口大小时，频繁触发
resize事件。防抖可以确保调整结束后再执行相应操作。 - 表单验证：用户输入表单数据时，可以用防抖来减少频繁的验证请求。
1.3 防抖的实现
下面是一个 JavaScript 的防抖实现示例：
function debounce(func, wait) {
let timeout;
return function(...args) {
const context = this;
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), wait);
};
}
解释：
debounce函数接收两个参数：func是需要执行的函数，wait是延迟的时间。- 每次触发事件时，先清除上一次的
timeout，然后重新设置一个新的定时器。 - 只有在指定的
wait时间内没有新的事件触发时，func才会被执行。
1.4 使用示例
假设我们在一个搜索输入框中使用防抖来减少请求次数：
const searchInput = document.getElementById('search');
const handleSearch = debounce(function() {
console.log('Sending request for:', .);
}, );
searchInput.(, handleSearch);
