防抖函数的核心思路是每次触发时清除旧定时器并设置新延迟任务，确保仅最后一次输入停顿后执行回调；基本实现用setTimeout与clearTimeout配合闭包保存timerId，进阶版支持立即执行和手动取消。
防抖函数的核心思路是：每次用户输入时，先清除上一次设定的定时器，再重新设置一个新的延迟执行任务；只有当用户停止输入超过指定时间后，才真正触发请求。
基本实现原理
利用 setTimeout 和 clearTimeout 配合闭包保存定时器 ID。每次触发函数时，先清掉旧的定时器（如果存在），再启动新的延时逻辑，确保只有最后一次输入后的等待期结束才会执行回调（比如发请求）。
简单可直接用的防抖函数
下面是一个通用、带取消能力的防抖实现：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
function debounce(func, delay) {
let timerId = null;
return function(...args) {
clearTimeout(timerId);
timerId = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
使用示例（配合搜索框）：
立即学习“Java免费学习笔记（深入）”；
const searchInput = document.getElementById('search');
const fetchData = (keyword) => {
console.log('发送请求:', keyword);
// 这里写 fetch 或 axios 请求
};
const debouncedFetch = debounce(fetchData, 300);
searchInput.addEventListener('input', (e) => {
debouncedFetch(e.target.value);
});
进阶：支持立即执行 + 取消功能
有些场景需要首次输入立刻执行（比如“搜索中…”提示），或中途能主动取消待执行任务。可扩展为：
function debounce(func, delay, immediate = false) {
let timerId = null;
const debounced = function(...args) {
const callNow = immediate && !timerId;
clearTimeout(timerId);
timerId = setTimeout(() => {
timerId = null;
if (!immediate) {
func.apply(this, args);
}
}, delay);
if (callNow) {
func.apply(this, args);
}
};
debounced.cancel = () => {
clearTimeout(timerId);
timerId = null;
};
return debounced;
}
- immediate: true → 第一次调用立即执行，后续触发需等停顿后再执行
- debounced.cancel() → 手动取消尚未执行的延迟任务（例如页面卸载前清理）
注意事项与常见坑
- 不要在每次 render 中重新创建防抖函数（如 React 中写在组件体内但没用 useCallback 包裹），否则每次都会新建定时器，导致失效
- 确保 this 和参数正确传递，推荐用 func.apply(this, args) 或箭头函数+展开运算符
- 延迟时间建议 200–500ms：太短易误触发，太长影响响应感
- 服务端也要做兜底限流，前端防抖不能替代后端防护
