带有jQuery ajax成功函数中的参数的google.setOnLoadCallback

Question

示例代码：这两个似乎都可以正常工作，以显示一条消息：

google.load("visualization", "1", { packages: ["corechart"] });
...
$(document).ready(function () {

  google.setOnLoadCallback(function () {
    alert('from inside ready 1');
  });
});

$(document).ready(function () {

  google.setOnLoadCallback(alert('from inside ready 2'));
});

注意：我仅将alert（..）用于调试目的-我的真实代码绘制了图表。 现在，我想在$ .ajax中使用这些技术，例如：

  $.ajax({
    type: "POST",
    ... 
    success: function (result) {
      if (result.d) {

        $(document).ready(function () {
          alert('sucess');

          // option 1
          google.setOnLoadCallback(function () {
            alert('from inside ready 3');
          });

          // option 2
          // google.setOnLoadCallback(alert('from inside ready 4'));
        });

现在，关于ajax成功，我可以看到显示了“成功”，但是选项1似乎不起作用。 即我看不到“从内部准备好3”。 如果我启用了选项2的代码，并注释掉了选项1的代码，我确实会看到“从内部准备好4”。

因此，似乎从jquery ajax调用中的选项2起作用了，但没有起作用。 谁能阐明一些想法？ 选项2 100％安全使用吗？ 似乎可行，但是我所看到的所有示例似乎都使用了选项1。

Answer 1

首先，您使用的是旧版的Google图表，
不再使用jsapi库，
请参阅发行说明 ...

可以通过jsapi加载程序保留的Google图表版本不再保持一致更新。 从现在开始，请使用新的gstatic loader.js 。

旧： <script src="https://www.google.com/jsapi"></script>

当前： <script src="https://www.gstatic.com/charts/loader.js"></script>

这只会改变加载语句...

从...

google.load("visualization", "1", { packages: ["corechart"] });

至...

google.charts.load("current", { packages: ["corechart"] });

---

接下来，您不需要在每次绘制图表时都使用回调函数，
它只需要使用一次，以确保Google图表已加载。

还有使用回调的几种方法，
您可以使用更新的setOnLoadCallback函数。

google.charts.setOnLoadCallback(drawChart);

或者您可以将回调直接放在load语句中。

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

或我更喜欢的是它的回报。 （Google包括针对IE的Promise Polyfill）

google.charts.load('current', {
  packages: ['corechart']
}).then(drawChart);

---

现在要解决的问题是
谷歌的load语句将默认等待文档加载，
因此您可以使用google.charts.load代替$(document).ready

建议先加载Google，然后使用Ajax获取数据，然后绘制图表。

类似于以下设置...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {

  // get data for chart 1
  $.ajax({
    type: 'POST',
    ...
  }).done(function (result) {

    drawChart1(result.d);

  }).fail(function (jqXHR, status, errorThrown) {
    console.log(errorThrown);
  });

  // get data for chart 2
  $.ajax({
    type: 'POST',
    ...
  }).done(function (result) {

    drawChart2(result.d);

  }).fail(function (jqXHR, status, errorThrown) {
    console.log(errorThrown);
  });

});

function drawChart1(chartData) {
  ...
}

function drawChart2(chartData) {
  ...
}