防抖函数通过定时器延迟执行回调，频繁触发时重置计时，确保事件停止后指定时间再执行。支持立即执行模式，适用于搜索输入、窗口缩放等场景，有效减少函数调用次数，核心是利用setTimeout和clearTimeout控制执行时机。
防抖函数（Debounce）是一种优化高频触发事件的手段，常用于窗口滚动、输入框搜索等场景。它的核心思想是：在事件被触发一段时间后才执行回调，如果在这段时间内事件再次被触发，则重新计时。
防抖的基本实现原理
利用 setTimeout 延迟执行函数，并在每次触发时清除之前的定时器。只有当事件停止触发超过指定时间后，目标函数才会真正执行。
一个基础的防抖函数实现如下：
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func.apply(this, args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}说明：
立即学习“Java免费学习笔记（深入）”；
- func 是需要防抖的原函数
- wait 是等待时间（毫秒）
- 返回的新函数会维护一个定时器，在每次调用时重置它
- 使用 apply 保证原函数的 this 指向和参数正确传递
立即执行版本（leading edge）
有时希望第一次触发立刻执行，之后的触发才进入防抖流程。可以加一个 immediate 参数来控制。
function debounce(func, wait, immediate) {
let timeout;
return function executedFunction(...args) {
const context = this;
const later = () => {
timeout = null;
if (!immediate) func.apply(context, args);
};
const callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}适用场景举例：
- 搜索框输入监听：用户打字时延迟请求接口，避免每输一个字就发一次请求
- 窗口大小调整：resize 事件频繁触发，用防抖控制布局重计算频率
- 按钮防重复点击：配合节流或防抖防止短时间内多次提交
实际使用示例
```javascript const searchInput = document.getElementById('search'); searchInput.addEventListener('input', debounce(function(e) { console.log('搜索关键词:', e.target.value); // 发起搜索请求... }, 300)); ```这样，只有当用户停止输入 300ms 后才会触发搜索，有效减少请求次数。
基本上就这些。防抖不复杂但容易忽略细节，关键是理解定时器的清除与重设逻辑。根据业务需求选择是否立即执行，就能应对大多数场景了。
