防抖函数通过重置计时器，使函数仅在操作停止后执行一次。核心是每次触发时清除旧定时器，并新建延迟执行的定时器。它依赖闭包保存timer、clearTimeout清理、apply绑定上下文，延迟时间需权衡效果与体验，分延迟执行和立即执行两种模式。

防抖函数通过“重置计时器”来减少高频事件的触发频率。核心作用是让函数只在用户操作真正停止后才执行一次，而不是每次触发都响应。

原理：用定时器做“等待窗口”

每次事件一触发，都会先把之前设下的定时器清掉，再重新挂上一个延后执行的新定时器。

只要用户还在持续操作，比如不停输入、滚动或者缩放，这个“等待窗口”就会被反复重置。旧的延时作废，新的延时重新计时。

等到操作真正停下来，并且超过设定的时间阈值（例如300ms）之后，函数才会正式执行。

关键实现要点

• 闭包保存定时器 ID：确保多次调用共享同一个 timer 变量，才能准确清除前一次的延时。
• 每次触发都 clearTimeout：这是防抖生效的前提，不清理就无法打断前序计划。
• 用 apply 保持 this 和参数正确：避免原函数执行时丢失上下文或事件对象。
• 延迟时间要合理：太短（如50ms）起不到过滤效果；太长（如1s）会让用户感觉卡顿；搜索场景常用 200–400ms，resize 或 scroll 可设 100–300ms。

两种常用模式怎么选

• 延迟执行（默认）：适合搜索框、表单验证。等用户打完字再查，不干扰输入节奏。
• 立即执行 + 后续防抖：适合需要“立刻反馈+后续冷静期”的操作，比如按钮点击防重复提交。第一次点马上生效，之后 1 秒内再点无效。

典型使用示例

监听输入框，300ms 内没新输入才发起搜索：

const search = debounce(() => {
fetch(`/api/searchq=${input.value}`);
}, 300);
input.addEventListener('input', search);

《夸克》非常好用的免费AI浏览器

下载APP查看