防抖只执行最后一次触发的操作，忽略中间多次调用；其函数通过清除前次定时器、设置新定时器实现；常用于提交按钮防止重复提交，并建议配合按钮禁用、状态提示等增强体验。
在 JavaScript 中，防抖（Debounce）常用于限制高频触发的操作，比如用户频繁点击提交按钮。它的核心思路是：**只执行最后一次触发的操作，忽略中间的多次调用**。对提交按钮而言，防抖能有效避免重复提交、重复请求，提升用户体验和后端稳定性。
防抖函数的基本实现
一个轻量级的防抖函数可以这样写：
function debounce(fn, delay) {
let timer;
return function (...args) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
它接收两个参数：要包装的函数 fn 和等待时间 delay（单位毫秒）。每次调用返回的新函数都会重置定时器，确保只有最后一次调用后的 delay 毫秒才真正执行 fn。
立即学习“Java免费学习笔记（深入）”；
给提交按钮绑定防抖点击事件
假设你的表单提交按钮是：
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
<button id="submitBtn">提交</button>
你可以这样绑定防抖处理：
const submitBtn = document.getElementById('submitBtn');
const handleSubmit = () => {
// 实际提交逻辑，如 fetch 或表单 submit()
console.log('正在提交...');
// 例如：document.getElementById('myForm').submit();
};
// 包装为防抖函数，延迟 1000ms 执行
const debouncedSubmit = debounce(handleSubmit, 1000);
submitBtn.addEventListener('click', debouncedSubmit);
更实用的增强处理（推荐）
仅靠防抖还不够稳健，建议配合以下操作：
- 点击后禁用按钮：防止视觉上仍可点击（即使防抖生效），提升反馈感；
- 提交成功/失败后恢复按钮：避免用户误以为卡死；
- 与加载状态结合：比如显示“提交中…”文字或 loading 图标；
- 防抖 + 节流按场景选型：若需“固定间隔最多执行一次”，考虑节流（throttle）；但提交类操作，防抖更合适。
完整示例（含按钮状态控制）
const submitBtn = document.getElementById('submitBtn');
const handleSubmit = async () => {
submitBtn.disabled = true;
submitBtn.textContent = '提交中...';
try {
// 模拟异步提交
// await fetch('/api/submit', { method: 'POST', body: formData });
await new Promise(resolve => setTimeout(resolve, 800)); // 模拟网络延迟
alert('提交成功！');
} catch (err) {
alert('提交失败，请重试');
} finally {
submitBtn.disabled = false;
submitBtn.textContent = '提交';
}
};
const debouncedSubmit = debounce(handleSubmit, 1000);
submitBtn.addEventListener('click', debouncedSubmit);
