如何确保jQuery的$.get函数优先执行，避免变量未赋值问题？

嘿，这个场景我太熟悉了——用$.get异步读文件的时候，JS根本不会等它返回结果，直接就跑去执行后面的函数了，结果latest_date还没赋值，依赖它的代码全报错。总不能把几十上百个函数都塞进$.get的回调里，也不可能瞎猜timeout时长（万一网络慢了还是会出问题），对吧？

下面给你几个靠谱的方案，都是从根本上解决异步顺序问题的：

方案1：用async/await + 入口函数（最推荐，代码最清爽） #

首先把获取日期的逻辑封装成一个返回Promise的函数（其实$.get本身返回的jqXHR对象就兼容Promise，但封装一下更清晰）：

function getLatestDate() {
  return new Promise((resolve, reject) => {
    $.get('你的文件路径.txt', (fileContent) => {
      // 假设文件里就是纯日期字符串，先处理掉换行空格之类的
      resolve(fileContent.trim());
    }).fail((error) => {
      // 请求失败的话别忘了处理错误
      reject(new Error(`读取文件失败: ${error.statusText}`));
    });
  });
}

然后写一个入口函数，用await等待日期获取完成，再调用所有依赖的函数：

async function initAllFunctions() {
  try {
    // 把日期挂载到全局，方便所有函数用
    window.latest_date = await getLatestDate();
    
    // 这里把所有需要依赖latest_date的函数挨个调用就行
    loadUserDashboard();
    renderDateFilter();
    updateChartData();
    // ...其他所有函数
  } catch (err) {
    console.error(err.message);
    // 可以给个默认值，或者提示用户加载失败
    window.latest_date = '2024-01-01';
  }
}

// 最后启动整个流程
initAllFunctions();

这样所有依赖函数都会严格等latest_date拿到正确值后才执行，完全不用嵌套回调，代码也干净。

方案2：用jQuery的Deferred对象（适合老项目） #

如果你的项目还在用老版本jQuery，不想用ES6的async/await，直接用$.get返回的Deferred对象就行：

// 先发起请求，存住这个请求对象
const dateRequest = $.get('你的文件路径.txt');

// 等请求成功后再执行所有依赖函数
dateRequest.done((fileContent) => {
  window.latest_date = fileContent.trim();
  
  // 同样在这里调用所有需要日期的函数
  loadUserDashboard();
  renderDateFilter();
  // ...
}).fail((error) => {
  console.error('读取文件失败:', error);
  window.latest_date = '2024-01-01'; // 兜底默认值
});

原理和方案1一样，只是用jQuery原生的Deferred语法来处理异步顺序。

方案3：让零散函数等待Promise（适合函数分散在不同地方的情况） #

如果有些函数是用户触发的（比如点击按钮、滚动事件），没法都塞进入口函数里，那可以把获取日期的Promise全局存起来，让这些函数先等Promise完成：

// 先把获取日期的Promise全局存好
window.latestDatePromise = getLatestDate().then((date) => {
  window.latest_date = date;
  return date;
});

// 比如一个点击按钮的函数
$('#export-btn').click(async () => {
  // 先等日期就绪再执行逻辑
  const targetDate = await window.latestDatePromise;
  // 这里就可以放心用targetDate或者全局的latest_date了
  exportDataByDate(targetDate);
});

// 另一个需要日期的函数
function updateChartData() {
  window.latestDatePromise.then((date) => {
    // 拿到日期后再更新图表
    fetchChartData(date);
  });
}

这样不管函数什么时候被触发，都会自动等待日期获取完成，再也不会出现拿不到值的情况。

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