异步 Json 请求不适用于谷歌动态图答案

【问题标题】：Asynchronous Json request not working with google motion chart异步 Json 请求不适用于谷歌动态图
【发布时间】：2017-08-23 10:06:17
【问题描述】：

我正在使用以下代码来请求 json 文件并对其进行解析

google.load('visualization', '1', {packages: ['controls', "motionchart", "table"]});
google.setOnLoadCallback(function(){
createTable($('#chart_div').width(),400);
})
var jsonData;
$.ajax({
 url: shapingTomorrowDataUrl,
 dataType: "json",
 async: true,
 success: function(data) {
  console.log("Data done");
  jsonData=data;
  createTable($('#chart_div').width(),400);
  }
});

现在我最初使用了对 json 文件的同步调用，它运行良好。但是现在我的客户希望在读取数据时播放加载器 gif。同步请求导致 gif 挂起很多。但是我对异步请求的问题是，在用户第一次打开我的仪表板时，在解析 json 数据之前调用了图表函数。我稍微更改了代码以在成功函数中调用该函数并注释回调函数。

但这会导致弹出以下错误：

未捕获的类型错误：无法读取未定义的属性“DataTable”

在下面一行：

var chartData = new google.visualization.DataTable();

所以本质上我的代码只在第一次尝试后才有效，即我猜是在 json 文件存储在缓存中之后。在第一次尝试中，加载器 gif 一直在播放，但从未绘制图表。非常感谢一些关于如何解决它的建议。

【问题讨论】：

我的意思是，显然 google.visualization 是未定义的。这和json有什么关系？
将请求更改为异步并注释回调函数后，出现未定义错误。
这可能是因为请求现在成功了，而以前没有，因此它现在正在运行其他一些抛出上述错误的函数。
我对请求不成功没有任何问题。我的问题是在后台读取 json 文件时调用了函数 createTable。由于文件尚未完全读取，我收到错误
但是...您向我们展示的错误不是由于 json... 它甚至没有使用它。

标签： javascript json ajax asynchronous google-visualization

【解决方案1】：

等到回调完成后再进行$.ajax 调用...

var jsonData;
google.load('visualization', '1', {packages: ['controls', "motionchart", "table"]});
google.setOnLoadCallback(function(){
  $.ajax({
   url: shapingTomorrowDataUrl,
   dataType: "json",
   async: true,
   success: function(data) {
    console.log("Data done");
    jsonData=data;
    createTable($('#chart_div').width(),400);
    }
  });
});

【讨论】：