防抖函数的核心逻辑是只执行最后一次触发操作，通过定时器清除与重设实现；支持立即执行选项，需注意this指向、参数传递及组件卸载时的定时器清理。
防抖函数的核心逻辑是：在用户连续触发事件时，只执行最后一次触发的操作，丢弃中间的请求。它通过定时器控制，在每次新触发时清除之前的定时器，重新设置延迟执行，从而避免短时间内重复提交或调用。
防抖的基本实现结构
一个标准的防抖函数接收两个参数：要执行的函数和延迟毫秒数。内部维护一个定时器引用，每次调用时先清除已有定时器，再启动新的延时任务。
- 使用 setTimeout 设置延迟执行
- 用闭包保存 timer 变量，确保多次调用间能正确清除前序定时器
- 返回一个新函数，供事件监听器绑定使用
带立即执行选项的增强版防抖
有些场景（如搜索框首次输入后立刻查询）需要支持“立即执行 + 后续冷却”模式。这时可在参数中增加 immediate 标志位：
- 为 true 时，第一次触发立刻执行，后续触发在冷却期内被忽略
- 为 false 时（默认），等停止触发后延迟执行最后一次
- 需注意 this 指向和参数传递，建议用 apply 或展开运算符保留上下文
实际应用中的关键细节
防抖不是万能的，需结合业务判断是否适用：
- 表单提交类操作一般用 非立即执行 防抖，防止用户还没输完就提交
- 滚动监听、窗口缩放等高频事件适合用防抖减少计算压力
- 注意取消防抖：比如组件卸载前应清除残留定时器，避免内存泄漏或报错
- 不要在防抖函数内直接修改 DOM，推荐封装成独立函数再传入
简单可复用的防抖函数示例
以下是一个兼顾实用性与可读性的实现：
function debounce(func, wait, immediate = false) {let timer;
return function executedFunction() {
const later = () => {
timer = null;
if (!immediate) func.apply(this, arguments);
};
const callNow = immediate && !timer;
clearTimeout(timer);
timer = setTimeout(later, wait);
if (callNow) func.apply(this, arguments);
};
}
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
