Javascript jquery ajax成功函数中包含参数的google.setOnLoadCallback

示例代码： 要显示消息，这两个选项似乎都正常工作：

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似乎不起作用。i、 我看不到“从内部准备3”。如果我在选项2启用代码，并注释掉选项1的代码，我会看到“从内部就绪4”

---

因此，从jqueryajax调用来看，选项2可以工作，但选项1不行。有人能解释一下吗？选项2是否100%安全使用？这似乎有效，但我看到的所有示例似乎都使用选项1

首先，您使用的是旧版本的谷歌图表，

jsapi

库不应再使用，
看

通过

jsapi

loader仍然可用的谷歌图表版本不再持续更新。从现在起，请使用新的gstatic

loader.js

旧版：

当前：

这只会更改load语句

从

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']
});

或者我更喜欢的是，它所回报的承诺。（谷歌为IE提供了polyfill承诺）

---

现在来谈谈手头的问题，
谷歌的

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) {
  ...
}

---

google.setOnLoadCallback（警报（'from inside ready 2'）是
警报
立即发出，而不是在
google
加载时发出。使用绝对不安全。选项2对于您尝试执行的操作无效，因为它会立即触发，并将您调用的函数的返回值（
alert（）
）设置为返回到函数的值。我不熟悉这个Google库，但我猜选项1很可能在设置“onload”回调时不起作用，但是加载事件在很久以前就触发了，在调用AJAX成功处理程序之前。我会查看Google文档以找到另一个合适的方法。您可以使用
Promise.all
，其中一个Promise在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) {
  ...
}