jQuery日期选择器递归触发change事件致栈溢出问题求助

这问题我之前做批量日期同步功能时也踩过坑！核心原因就是你用val()设置日期时，Datepicker的备用字段会自动触发change事件，导致所有输入框的事件处理函数反复调用，最终栈溢出。下面给你几个靠谱的解决方案：

方案一：用标志位跳过递归触发的事件 #

这是最简洁的方法，通过一个开关变量判断当前是否正在同步操作，如果是就直接跳过事件处理，避免递归：

// 声明一个闭包内的标志变量，避免全局污染
let isSyncingDates = false;

$('input[name="productDate"]').on('change', function () {
  // 如果正在同步，直接返回，不执行后续逻辑
  if (isSyncingDates) return;
  
  isSyncingDates = true;
  // 同步所有日期输入框的值
  $('input[name="productDate"]').val($(this).val());
  isSyncingDates = false;
});

方案二：临时解绑事件再重新绑定 #

这种方法是在设置日期前，先把所有同类输入框的change事件解绑，设置完成后再重新绑定，这样设置值时就不会触发事件了：

// 把事件处理函数抽成命名函数，方便重新绑定
function syncAllProductDates() {
  const $dateInputs = $('input[name="productDate"]');
  // 先解绑所有change事件
  $dateInputs.off('change', syncAllProductDates);
  // 设置所有输入框的日期
  $dateInputs.val($(this).val());
  // 重新绑定事件
  $dateInputs.on('change', syncAllProductDates);
}

// 初始化绑定事件
$('input[name="productDate"]').on('change', syncAllProductDates);

方案三：使用Datepicker原生API操作（推荐） #

既然用了Datepicker组件，最好直接用它提供的方法来操作日期，而不是手动修改val()。Datepicker的setDate方法可以安全设置日期，且不会额外触发change事件：

$('input[name="productDate"]').on('change', function () {
  // 获取当前选中的日期对象
  const selectedDate = $(this).datepicker('getDate');
  // 排除当前触发事件的输入框，给其他输入框设置日期
  $('input[name="productDate"]').not(this).each(function() {
    $(this).datepicker('setDate', selectedDate);
  });
});

这个方案最贴合Datepicker的设计逻辑，也从根源上避免了递归触发的问题，推荐优先使用。

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