防抖按钮必须显式设type="button"，否则默认触发submit；debounce实例需复用而非每次新建；移动端延迟选300–500ms并配loading反馈；键盘弹出导致定位错位应监听visualviewport而非window.resize。
防抖按钮必须显式设 type="button"
直接写 <button>提交</button> 在表单里会默认触发 submit，防抖逻辑根本来不及执行——页面就刷新了。哪怕没包在 <form></form> 里，也得声明 type="button"，否则浏览器可能按语义自动赋予提交行为。
常见翻车现象：
• 点击后页面跳转或刷新，控制台报 Uncaught TypeError: Cannot read property 'preventDefault' of undefined
• 防抖函数写了，但连续点击仍发多次请求
- 正确写法：
<button type="button" id="save-btn">保存</button> - 别用
<input type="button">：不支持子元素（比如图标），可维护性差 - 如果按钮是 JS 动态插入的，记得每次创建时都带上
type="button"
debounce() 实例必须复用，不能每次绑定都新建
防抖靠闭包维持同一个 timer 引用，才能清除前序定时器。如果每次 addEventListener 都调一次 debounce(handler, 300)，等于每次生成一个独立 timer，旧的清不掉，防抖就形同虚设。
典型错误：btn.addEventListener('click', debounce(handleSave, 300)) —— 这里 debounce() 立即执行，返回新函数，但每次绑定都重来一遍。
- 正确做法：
const debouncedSave = debounce(handleSave, 300); btn.addEventListener('click', debouncedSave); - 多个动态按钮（如列表项里的操作按钮）需各自独立实例，不能共用一个
debouncedSave - 确保
debounce函数内部用func.apply(this, args)保持this和参数透传
移动端防抖延迟值选 300–500ms，且要配视觉反馈
设成 100ms 容易把双击、触屏悬停识别为误触；设成 800ms 又会让用户明显感知“卡顿”。300–500ms 是平衡意图识别与响应及时性的安全区间。
光防抖不够——用户点下去没反馈，会下意识再点，反而绕过防抖。必须同步禁用按钮并给 loading 状态：
- 点击时立即设
btn.disabled = true，并加data-pending属性便于 CSS 控制样式 - 避免只靠 CSS
:disabled，有些安卓 WebView 对 disabled 样式支持不稳定 - 接口成功/失败后，必须手动恢复
btn.disabled = false，不能依赖页面刷新
软键盘弹出时按钮定位错乱，不是防抖问题而是视口计算失效
很多“按钮抖动”实际和防抖无关，而是软键盘弹出导致 100vh、fixed 定位失准。iOS Safari 和安卓 WebView 在键盘弹起时不更新 window.innerHeight，也不触发 resize 事件。
这时候防抖还在跑，但按钮位置已经漂移甚至被截断。真正该用的是 visualViewport API：
- 监听
visualViewport.addEventListener('resize', ...)，而非window.resize - 用
visualViewport.height判断键盘是否弹出（例如比初始值小 >150px） - 微信 X5 内核不支持
visualViewport，需降级到focusin/focusout + setTimeout检测滚动偏移 - 固定定位按钮若仍错位，检查祖先元素是否设置了
transform或filter——它们会让fixed退化为相对定位
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
