JavaScript中如何在其他函数中使用回调及回调内变量外部调用问题

咱们先拆解下你遇到的问题：网络请求是异步操作，也就是说getMainData里的回调函数，要等网络请求成功后才会执行。如果你在回调外面直接去拿mainData，大概率这时候数据还没被赋值，自然就拿不到。下面给你几种实用的解决办法，从简单到现代的都有：

方法一：直接在回调里调用图表更新函数 #

这是最直接的思路——既然处理后的数据在回调里，那咱们就在回调里直接把数据传给更新图表的函数，让它立刻执行逻辑。

示例代码：

// 获取并处理数据的函数
function getMainData(city, callback) {
  // 模拟网络请求（实际项目里换成你的AJAX/fetch代码）
  setTimeout(() => {
    // 假设从接口拿到的原始JSON数据
    const rawJsonData = {
      city: city,
      dailyTemp: [18, 21, 23, 20, 19]
    };
    // 对数据做轻微处理（比如转成图表需要的格式）
    const processedData = rawJsonData.dailyTemp.map(temp => ({ value: temp, date: `2024-05-${temp}` }));
    // 执行回调，把处理好的数据传进去
    callback(processedData);
  }, 1000);
}

// 更新图表的函数
function updateChart(chartData) {
  console.log("开始更新图表：", chartData);
  // 这里写你的图表更新逻辑，比如调用ECharts/HighCharts的setOption方法
}

// 使用方式：调用getMainData时，把处理后的数据直接传给updateChart
getMainData("深圳", function(processedData) {
  updateChart(processedData);
});

方法二：用Promise + async/await（推荐！现代异步处理方式） #

回调嵌套多了容易出现“回调地狱”，用Promise和async/await可以让异步代码看起来像同步代码，可读性强很多。

示例代码：

// 把getMainData改成返回Promise的函数
function getMainData(city) {
  return new Promise((resolve, reject) => {
    // 模拟网络请求
    setTimeout(() => {
      try {
        const rawJsonData = {
          city: city,
          dailyTemp: [18, 21, 23, 20, 19]
        };
        const processedData = rawJsonData.dailyTemp.map(temp => ({ value: temp, date: `2024-05-${temp}` }));
        // 请求成功，把处理后的数据传出去
        resolve(processedData);
      } catch (error) {
        // 请求失败，抛出错误
        reject(error);
      }
    }, 1000);
  });
}

// 用async/await来等待数据返回
async function initChart() {
  try {
    // 等待getMainData完成，拿到处理后的数据
    const chartData = await getMainData("杭州");
    // 拿到数据后再更新图表
    updateChart(chartData);
  } catch (error) {
    console.error("获取数据失败：", error);
  }
}

// 更新图表函数不变
function updateChart(chartData) {
  console.log("开始更新图表：", chartData);
  // 图表更新逻辑
}

// 初始化图表
initChart();

方法三：全局变量（不推荐，尽量少用） #

如果你一定要用全局变量存数据，那必须确保回调执行完毕后再调用更新函数，不然数据还没赋值就会拿空值。

示例代码：

let mainData; // 全局变量

function getMainData(city, callback) {
  setTimeout(() => {
    const rawJsonData = {
      city: city,
      dailyTemp: [18, 21, 23, 20, 19]
    };
    mainData = rawJsonData.dailyTemp.map(temp => ({ value: temp, date: `2024-05-${temp}` }));
    callback(); // 数据准备好后通知外部
  }, 1000);
}

function updateChart() {
  if (mainData) {
    console.log("开始更新图表：", mainData);
    // 图表更新逻辑
  } else {
    console.log("数据还没准备好，请稍后再试");
  }
}

// 使用时，必须在回调里调用updateChart，确保mainData已经赋值
getMainData("成都", function() {
  updateChart();
});

关键提醒 #

核心问题就是异步操作的时机：网络请求不会阻塞代码执行，所以你不能在getMainData调用后立刻去拿处理后的数据，必须等回调触发（或者Promise resolve）后再去用。优先用方法二的Promise+async/await，代码更整洁也更容易维护。

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