JavaScript无法向数组添加元素问题求助（异步请求场景）

这是前端开发里非常常见的异步陷阱！你遇到的问题核心在于：$.getJSON是异步执行的，代码并不会按照你写的从上到下同步完成。

让我拆解一下你的代码执行顺序：

1. 声明months和values两个空数组
2. 发起$.getJSON请求，但这个请求会在后台运行，不会阻塞后面的代码
3. 立刻执行第二个alert(months)，这时候请求还没拿到服务器返回的数据，months自然还是空数组
4. 过了一会儿，服务器返回了JSON数据，才会执行success回调里的代码，把数据push到数组里，这时候第一个alert才会显示正确结果

所有需要用到months和values的代码（比如初始化Chart.js的逻辑），都必须放在success回调函数内部，或者用异步语法（Promise/async-await）来处理。

方案1：使用回调函数（最贴合你当前的代码写法） #

修改代码，把图表初始化的逻辑移到success回调里：

$(document).on("turbolinks:load", function(){ 
  var months = []; 
  var values = []; 

  $.getJSON({
    url: "/reports/graph_data.json", 
    success: function(data){ 
      // 填充数组
      for (var i = 0, len = data.length; i < len; i++) { 
        months.push(data[i][0]); 
        values.push(data[i][1]); 
      } 

      // 这里可以安全地使用填充好的数据
      alert(months);
      // 调用图表初始化函数
      renderChart(months, values);
    },
    error: function(error) {
      // 别忘了处理请求失败的情况
      console.error('获取图表数据失败:', error);
    }
  }); 

  // 单独定义图表渲染函数，让代码更清晰
  function renderChart(labels, data) {
    // 这里写你的Chart.js初始化代码
    new Chart(document.getElementById('your-chart-id'), {
      type: 'bar', // 或者你需要的图表类型
      data: {
        labels: labels,
        datasets: [{
          label: '月度数据',
          data: data,
          // 其他配置项
        }]
      },
      options: {
        // 图表配置
      }
    });
  }
});

方案2：使用Async/Await（更现代的写法） #

如果你习惯ES6+的语法，可以把$.getJSON转换成Promise，然后用async/await让异步代码看起来像同步代码：

$(document).on("turbolinks:load", async function(){ 
  try {
    // 等待请求完成，拿到数据
    const data = await $.getJSON("/reports/graph_data.json");
    
    // 用map简化数组填充（比for循环更简洁）
    const months = data.map(item => item[0]);
    const values = data.map(item => item[1]);

    // 这里可以直接使用数据
    alert(months);
    renderChart(months, values);
  } catch (error) {
    console.error('请求出错:', error);
  }

  function renderChart(labels, data) {
    // Chart.js初始化代码
  }
});

• 异步操作（比如AJAX请求）不会阻塞主线程，后续代码会继续执行
• 只有当异步操作完成时（比如服务器返回数据），对应的回调/then/await代码块才会执行
• 任何依赖异步结果的逻辑，都必须放在异步操作完成后的代码块里

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