防抖用于防止单选框高频操作触发冗余回调，而非过滤中间状态；因单选框状态切换是原子性的，change事件天然反映最终选中值，应对其处理器做100–300ms防抖，且必须绑定change而非click事件。
单选框（radio）本身是互斥的，用户点击不同选项时会立即触发 change 事件，但“快速连续切换”（比如连点两个相邻选项）可能产生多个瞬时状态变化。防抖不是用来“过滤中间选中态”——因为 DOM 中单选框不会出现“同时选中两个”的中间态，而是防止因高频操作（如误触、自动化脚本、键盘快速切换）导致的冗余回调执行。
理解单选框的真实行为
浏览器对单选框的处理是原子性的：点击一个未选中的 radio，它立刻变为 checked，原已选中的自动取消。不存在“半选中”或“过渡态”。所谓“中间状态”其实是用户感知上的快速跳变，而非 DOM 真实存在多个 checked 的瞬间。因此防抖目标不是拦截 DOM 状态，而是延迟响应最终稳定的选择结果。
用防抖包装 change 事件处理器
在绑定事件时，不直接执行业务逻辑，而是通过防抖函数包裹处理函数，确保只响应最后一次稳定的点击结果：
- 使用标准的防抖实现（如 Lodash 的
debounce，或手写） - 延迟时间建议设为 100–300ms：足够过滤连击，又不明显卡顿
- 注意：必须用
change事件（不是click），因为只有 change 能可靠反映最终选中值
示例代码（手写防抖 + 原生 radio 组）
HTML：
<input type="radio" name="color" value="red"> 红色<br><input type="radio" name="color" value="blue"> 蓝色<br><input type="radio" name="color" value="green"> 绿色
JavaScript：
function debounce(fn, wait) {<br> let timeout;<br> return function (...args) {<br> clearTimeout(timeout);<br> timeout = setTimeout(() => fn.apply(this, args), wait);<br> };<br>}<br><br>const radios = document.querySelectorAll('input[name="color"]');<br>const handleSelection = debounce(function () {<br> const selected = document.querySelector('input[name="color"]:checked');<br> if (selected) console.log('最终选中:', selected.value);<br>}, 200);<br><br>radios.forEach(radio => radio.addEventListener('change', handleSelection));
避免常见误区
- 不要在
click上防抖：click 可能触发多次（比如先点 A 再点 B），但 change 才代表真实选择变更 - 不要试图用防抖阻止 DOM 更新：radio 的 checked 属性始终实时同步，防抖只控制后续逻辑执行时机
- 若需兼容键盘操作（Tab+Space），
change事件天然支持，无需额外处理
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
