javascript - google.setOnLoadCallback 在 jquery ajax 成功函数中带有参数

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”。

所以看起来选项 2 有效，但不是选项 1，来自 jquery ajax 调用。任何人都可以阐明一下吗？选项 2 使用起来是否 100% 安全？它似乎可行，但我看到的所有示例似乎都使用了选项 1。

Answer 1

首先，您使用的是旧版 google charts，
jsapi不应再使用库，
查看release notes ...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader.js from now on.

旧:<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"] });

---

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

并且有几种方法可以使用回调，
您可以使用更新的 setOnLoadCallback功能。

google.charts.setOnLoadCallback(drawChart);

或者您可以将回调直接放在 load 中陈述。

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

或者我更喜欢它返回的 promise 。 (谷歌包含一个用于 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) {
  ...
}