表单提交防抖必须用 addeventlistener 绑定，onclick 内联写法会失效；需传 e.preventdefault() 阻止原生提交，推荐防抖（非节流），搜索框防抖应监听 input 事件并取消前序请求。
表单提交按钮防抖必须用 addEventListener 绑定
直接写 onclick="debounce(submitHandler, 500)()" 会失效，每次点击都新建一个防抖函数并立即执行，timeout 变量无法跨次保留，clearTimeout 拿不到上次 ID。浏览器控制台可能报 ReferenceError: debounce is not defined，除非你把函数挂到 window 上——但这是污染全局的反模式。
正确做法是：先定义防抖函数，再用 addEventListener 绑定到按钮或表单 submit 事件上：
const submitBtn = document.getElementById('submit-btn');
const debouncedSubmit = debounce(handleFormSubmit, 600);
submitBtn.addEventListener('click', (e) => {
e.preventDefault(); // 阻止默认提交
debouncedSubmit(e);
});
- 必须传
e.preventDefault()，否则表单仍会原生提交 - 防抖函数内部要用
func.apply(this, arguments)透传事件对象和上下文 - 如果按钮是
<button type="submit"></button>，监听submit事件更稳妥（绑定在<form></form>上）
防抖 vs 节流：表单提交该选哪个
表单提交属于「只允许最终动作生效」的场景，用户连点多次，你只需要处理最后一次 —— 所以防抖比节流更合适。节流会在固定周期内至少执行一次，反而可能造成重复提交。
但注意例外：如果是「防重复提交 + 后端幂等兜底」双保险策略，节流（定时器版）更可控，因为它能确保用户点击后立刻禁用按钮，并在 delay 结束后才恢复：
const throttleSubmit = throttle(handleFormSubmit, 800);
submitBtn.addEventListener('click', (e) => {
e.preventDefault();
throttleSubmit(e);
});
- 节流定时器版（推荐用于按钮）：用布尔开关
inThrottle控制，首次点击立刻执行，后续点击被忽略直到开关重置 - 防抖版（推荐用于搜索类表单）：用户停止操作后延迟执行，适合带输入校验、异步预检的流程
- 两者都需配合按钮
disabled状态反馈，否则用户感知不到限制
input 输入框搜索防抖必须监听 input 事件
别用 change（只在失焦时触发）、也别用 keyup（漏掉粘贴、语音输入、剪切等操作）。只有 input 事件能覆盖所有文本变更路径。
防抖逻辑要能取消前序请求，避免旧结果覆盖新结果：
const searchInput = document.getElementById('search');
let lastRequest = null;
const debouncedSearch = debounce(() => {
if (lastRequest) lastRequest.abort(); // 取消上一次 fetch
lastRequest = fetchSuggestions(searchInput.value);
}, 400);
searchInput.addEventListener('input', debouncedSearch);
- 防抖函数本身不处理 cancel，得在被包装的函数里显式调用
abort()或清空 pending promise - 空字符串或长度
- 不要在防抖回调里直接操作 DOM（如更新 datalist），应等异步完成后再批量渲染
容易被忽略的关键点：防抖/节流不等于提交安全
防抖函数只控制「何时执行提交逻辑」，它不保证提交成功、不拦截网络失败、也不处理用户中途关闭页面或刷新。真正健壮的提交防护还要叠加：
- 按钮点击后立即设
disabled = true，提交完成或失败后再恢复 - 后端必须实现幂等接口（例如用唯一
request_id去重） - 前端可加 loading 状态 + 提交中提示，避免用户因无反馈而反复点击
- 如果用
fetch，记得检查response.ok和网络异常，失败后要手动恢复按钮状态
闭包变量（如 timeout、inThrottle、lastRequest）才是防抖节流生效的底层依赖，而 HTML 内联属性天生破坏闭包 —— 这个机制细节，比函数怎么写更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
