防抖函数通过重置计时器使函数仅在操作停止后执行一次，核心是每次触发时清除旧定时器并新建延迟执行的定时器，依赖闭包保存timer、clearTimeout清理、apply绑定上下文，延迟时间需权衡效果与体验，分延迟执行和立即执行两种模式。
防抖函数通过“重置计时器”来减少高频事件的触发频率，核心是让函数只在用户操作真正停止后才执行一次，而不是每次触发都响应。
原理：用定时器做“等待窗口”
每次事件触发时，先清除之前设好的定时器，再新建一个延迟执行的定时器。只要用户还在持续操作（比如不停输入、滚动或缩放），这个“等待窗口”就会不断被刷新，旧的延时被取消，新的延时重新开始倒计时。只有当操作完全停下、且超过设定时间（如300ms）后，函数才真正运行。
关键实现要点
-
闭包保存定时器 ID：确保多次调用共享同一个
timer变量，才能准确清除前一次的延时 - 每次触发都 clearTimeout：这是防抖生效的前提，不清理就无法打断前序计划
- 用 apply 保持 this 和参数正确：避免原函数执行时丢失上下文或事件对象
- 延迟时间要合理：太短（如50ms）起不到过滤效果；太长（如1s）会让用户感觉卡顿；搜索场景常用 200–400ms，resize 或 scroll 可设 100–300ms
两种常用模式怎么选
- 延迟执行（默认）：适合搜索框、表单验证——等用户打完字再查，不干扰输入节奏
- 立即执行 + 后续防抖：适合需要“立刻反馈+后续冷静期”的操作，比如按钮点击防重复提交——第一次点马上生效，之后 1 秒内再点无效
典型使用示例
监听输入框，300ms 内没新输入才发起搜索：
const search = debounce(() => {fetch(`/api/search?q=${input.value}`);
}, 300);
input.addEventListener('input', search);
