防抖器用定时器管理任务执行时机，核心是取消未完成的等待、只保留最后一次触发后的执行；它通过声明timer变量、每次调用先cleartimeout再settimeout实现，并需正确处理this、参数及可选的立即执行逻辑。
任务防抖器不是替代定时器，而是用定时器来管理任务的执行时机——核心是“取消未完成的等待，只保留最后一次触发后的执行”。它不消灭定时器，而是让定时器更聪明地工作。
明确防抖要解决的问题
当一个操作可能被高频、短时间重复触发（比如用户连续输入、窗口反复缩放、按钮连点），直接为每次触发都启动一个定时器，会导致大量冗余任务堆积、资源浪费甚至逻辑错乱。防抖的目标是：只响应“稳定下来”的那一次。
- 不是“禁止触发”，而是“延迟判断是否真要执行”
- 不是“删掉所有定时器”，而是“清掉旧的，只留最新的那个倒计时”
- 关键指标是“静默期”：从最后一次触发起，等够设定时间没新动作，才真正干活
基础实现的关键三步
一个可用的防抖函数只需围绕 timer 变量做三件事：
- 声明一个闭包变量：let timer = null，用来存当前正在跑的定时器 ID
- 每次调用先清旧定时器：clearTimeout(timer)，确保前一次延时作废
- 重设新定时器：setTimeout(() => { fn.apply(this, args) }, delay)，把执行权交给最后一次触发
必须处理的两个细节
光有 clearTimeout + setTimeout 还不够，实际使用中容易出错的点就在这儿：
- this 和参数传递：事件回调里 this 往往是 DOM 元素，arguments 是 event 对象。要用 func.apply(this, arguments) 或 ...args 展开，不能直接 func() 吃掉上下文
- 立即执行选项（immediate）：有些场景（如首次点击按钮立刻响应，后续连点则防抖）需要支持。这时需判断 timer 是否为空，空则立刻执行并重置 timer；非空则照常延后
典型使用示例
以搜索框为例，避免每敲一个字就发请求：
const searchHandler = debounce((e) => {fetch(`/api/search?q=${e.target.value}`);
}, 400);
input.addEventListener('input', searchHandler);
用户输入 “react” 的过程中，会触发 5 次 input 事件，但只有第 5 次输入后静默 400ms，才会真正调用 fetch。前面 4 次的定时器全被 clearTimeout 清掉了。
