防抖不适合限制触发次数，只响应最后一次点击并延迟执行；适合搜索、缩放等非即时场景，不适用于需保底触发或统计次数的场景。
按钮连续点击时，防抖（Debounce）其实并不适合用来“限制触发次数”，它更适合“延迟执行、只响应最后一次操作”。如果你的目标是防止用户频繁点击导致重复提交或多次调用函数，节流（Throttle）或禁用按钮更直接有效；但若你确实想用防抖实现类似效果，关键在于：防抖会把多次点击“压缩”成一次延迟执行，中间的点击会被忽略。
防抖的核心逻辑：重置定时器
每次点击都清除上一次的定时器，并重新设置一个新的延迟任务。只有最后一次点击之后等待时间结束，函数才真正执行。
- 适用于搜索框输入、窗口缩放等“不着急立刻响应”的场景
- 不适合“必须保证至少触发一次”或“要统计点击次数”的需求
- 连续点击不会累积，只会以最后一次为准
简单防抖函数写法（按钮点击适用）
下面是一个轻量、可直接绑定到按钮上的防抖封装：
function debounce(fn, delay) {
let timer = null;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
// 使用示例
const handleClick = () => {
console.log('按钮被点击（防抖后）');
// 这里放你的提交、API 调用等逻辑
};
document.getElementById('myBtn').onclick = debounce(handleClick, 800);
比防抖更合适的替代方案
如果真实需求是“防止重复提交”或“控制单位时间内最多触发几次”，推荐以下方式：
立即学习“Java免费学习笔记（深入）”；
-
点击后禁用按钮：执行前设
btn.disabled = true，成功/失败后再恢复 - 节流（Throttle）：比如限制 1 秒内最多执行 1 次，适合高频但需保底响应的场景
-
状态锁：用一个布尔变量
isProcessing控制，true 时直接 return
防抖 + 按钮禁用的组合用法（兼顾体验与安全）
既防抖又避免误操作，可这样增强：
let isLocked = false;
const debouncedClick = debounce(() => {
if (isLocked) return;
isLocked = true;
btn.disabled = true;
// 执行业务逻辑（如 fetch）
doSubmit().finally(() => {
isLocked = false;
btn.disabled = false;
});
}, 500);
