如何在函数外部获取jQuery change事件中赋值的startDate变量？

这是执行时机的问题：

• 页面加载时，全局代码里的console.log("outside start date: " + startDate)会立即执行，此时#dayFrom和#timeFrom的change事件还没触发，startDate保持初始的undefined，所以输出异常。
• 只有当用户修改这两个输入框的内容时，change事件的回调函数才会执行，此时startDate被赋值，内部的console.log才能输出正确结果。

根据你需要在外部使用startDate的场景，提供几种可行方案：

方案1：在事件回调内调用外部逻辑 #

如果需要在startDate更新后执行相关操作，把逻辑封装成函数，在回调里调用即可：

var startDate;

// 封装需要使用startDate的逻辑
function useStartDate() {
  console.log("outside start date: " + startDate);
  // 这里可以加提交表单、更新页面内容等操作
}

$('#dayFrom, #timeFrom').change(function() {
   startDate = $('#dayFrom').val() + ' ' + $('#timeFrom').val();
   console.log("inside start date: " + startDate);
   // 触发外部逻辑
   useStartDate();
});

方案2：用自定义事件监听变化 #

如果多个地方需要响应startDate的更新，可以触发自定义事件，在需要的地方监听：

var startDate;

$('#dayFrom, #timeFrom').change(function() {
   startDate = $('#dayFrom').val() + ' ' + $('#timeFrom').val();
   console.log("inside start date: " + startDate);
   // 触发自定义事件，携带更新后的值
   $(document).trigger('startDateUpdated', [startDate]);
});

// 在需要使用的地方监听事件
$(document).on('startDateUpdated', function(event, updatedDate) {
  console.log("outside start date: " + updatedDate);
  // 这里用拿到的updatedDate做逻辑处理
});

方案3：用Promise处理异步场景 #

如果需要异步等待startDate被赋值，可以用Promise包裹逻辑：

function getStartDate() {
  return new Promise((resolve) => {
    // 先检查输入框是否已有内容
    const initialDate = $('#dayFrom').val() + ' ' + $('#timeFrom').val();
    if (initialDate.trim() !== ' ') {
      resolve(initialDate);
      return;
    }
    // 没有内容则等待change事件触发
    $('#dayFrom, #timeFrom').one('change', function() {
      const finalDate = $('#dayFrom').val() + ' ' + $('#timeFrom').val();
      resolve(finalDate);
    });
  });
}

// 使用时通过then获取值
getStartDate().then(startDate => {
  console.log("outside start date: " + startDate);
  // 这里处理拿到的startDate
});

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