防抖是一种限制函数执行频率的技术，核心是在事件连续触发时只执行最后一次调用，常用于搜索输入、窗口缩放等场景以减少冗余操作；其原理是每次触发时清除旧定时器并重设新定时器，仅当触发停止超过设定时间才执行函数。
防抖（Debounce）是一种限制函数执行频率的技术，核心思想是：**在事件连续触发时，只执行最后一次触发对应的函数调用**。它常用于搜索框输入、窗口缩放、滚动等高频操作场景，能显著减少不必要的计算和请求，从而提升页面响应速度和整体性能。
防抖解决什么问题
用户快速输入时，每按一次键就发起一次请求或执行一次复杂逻辑，会导致大量冗余操作。例如在搜索框中输入“hello”，若未防抖，可能触发5次请求（h, he, hel, hell, hello），而实际只需响应最终结果。防抖通过设定等待时间，自动忽略中间过程，只处理稳定后的状态。
防抖的基本实现原理
每次事件触发时，先清除之前设置的定时器，再新建一个延迟执行的定时器。如果在延迟时间内再次触发，旧定时器被清除，新定时器重新计时；只有当事件停止触发超过设定时间，函数才真正执行。
示例代码：
立即学习“Java免费学习笔记（深入）”；
function debounce(func, wait) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
}
// 使用示例：监听输入框
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(() => {
console.log('执行搜索请求');
}, 300));
关键细节与使用建议
- 等待时间需权衡：太短（如50ms）可能无法过滤掉抖动，太长（如1s）会让用户感觉响应迟钝。常见输入场景推荐200–500ms。
-
注意this和参数传递：使用
func.apply(this, args)确保原函数的上下文和参数正确传递。 -
立即执行选项可选：部分场景需要首次触发立刻执行（如按钮点击防重复提交），可通过添加
immediate参数实现，此时逻辑变为“首次立即执行，后续进入等待”。 - 手动取消能力很重要：在组件卸载或表单重置时，应提供取消防抖的方法（如返回一个cancel函数），避免内存泄漏或执行过期回调。
防抖 vs 节流（Throttle）
节流是另一种限频技术，特点是“固定时间间隔内最多执行一次”，适合监听滚动、鼠标移动等需持续反馈的场景；而防抖强调“等你停下来再干活”，更适合等待用户意图明确后再响应。两者目标相似，但适用节奏不同——防抖更省资源，节流更保节奏。
