手写防抖

来源：js/实现/防抖.html，手写实现 debounce —— 持续触发事件，以最后一次为准，停止后延迟执行。

速查导航

• 防抖是什么 — 以最后一次为准
• 基础版 — 每次清除上一个定时器
• 立即执行版 — immediate 参数
• 对比节流 — 防抖 vs 节流

---

防抖是什么

持续触发事件，以最后一次为准，停止触发后延迟执行。

典型场景：搜索框输入、窗口 resize 后重新计算布局。

---

基础版

每次触发都清除上一个定时器，重新计时：

要点： clearTimeout 确保只有最后一次触发能真正执行。

---

立即执行版

添加 immediate 参数：第一次触发立即执行，之后在等待期间不再执行。

immediate 模式执行流程：

1. 第一次触发 → timeout 为空 → callNow = true → 立即执行
2. 后续触发 → timeout 存在 → 每次清除重建 → 不执行
3. 等待 wait 过期后 → timeout = null → 下次触发又能立即执行

---

对比节流

特性	防抖 (debounce)	节流 (throttle)
执行时机	停止触发后延迟执行	固定间隔执行一次
持续触发	只执行最后一次	按频率持续执行
典型场景	搜索输入、表单验证	滚动加载、鼠标跟踪
比喻	电梯等人到齐再走	电梯定时发车