jQuery单选按钮change事件触发两次，如何将其视为单次事件？

我完全懂你遇到的这个麻烦——切换单选按钮时，change事件会分别在已取消选中的单选按钮和新选中的单选按钮上各触发一次，导致你的doTheFunction被执行两次。这里有几个实用的JavaScript方案帮你把这两次事件合并成一次有效触发：

方案1：只响应「选中状态」的事件 #

在事件处理逻辑里加一层判断，只有当触发事件的单选按钮处于checked状态时，才执行你的目标函数：

$('form .radio_buttons').change(function() {
  if (this.checked) { // 仅处理被选中的按钮触发的事件
    doTheFunction();
  }
});

这个方法直接过滤掉了「取消选中」时的无效触发，确保逻辑只运行一次。

方案2：使用防抖(Debounce)函数 #

防抖函数可以让你的目标函数在连续事件触发后的指定时间内只执行一次，完美适配这种短时间内连续触发两次事件的场景。你可以自己实现一个简单的防抖函数：

function debounce(func, delay = 100) {
  let timeoutId;
  return function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, arguments), delay);
  };
}

// 绑定经过防抖处理的函数
$('form .radio_buttons').change(debounce(doTheFunction));

你可以根据实际情况调整delay参数，一般100ms就足够覆盖单选按钮切换的两次事件间隔。

关于你提到的深层问题排查 #

既然你说无法在应用外复现这个问题，但Scott Marcus的方案已经生效，建议你可以从这几个方向排查事件重复触发的根源：

• 检查是否不小心给同一组单选按钮重复绑定了change事件
• 查看是否有父元素的事件冒泡导致事件被多次捕获/触发
• 排查应用内其他脚本是否也监听了单选按钮的状态变化

内容的提问来源于stack exchange，提问作者Andrew Algard