带有jQuery ajax成功函数中的参数的google.setOnLoadCallback [英] google.setOnLoadCallback with parameter inside jquery ajax success function

问题描述

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

Sample code: Both of these seem to work ok, to display a message:

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中使用这些技术，例如:

Note: I'm using alert(..) just for debugging purposes - my real code draws charts. Now, I want to use these techniques inside $.ajax e.g. :

  $.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".

Now, on ajax success, I can see "sucess" shown, but option 1 doesn't seem to work. i.e. I don't see "from inside ready 3". If I enable the code at option 2, and comment out the code for option 1, I DO see "from inside ready 4".

因此，似乎jquery ajax调用中的选项2有效，但选项1不起作用.谁能给我一些启示?选项2 100％安全使用吗?似乎可行，但是我所看到的所有示例似乎都使用了选项1.

So it seems that option 2 works, but not option 1, from a jquery ajax call. Can anyone shed some light? Is option 2 100% safe to use? It seems to work, but all the examples I've seen seem to use option 1.

推荐答案

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

first, you're using the old version of google charts,
the jsapi library should no longer be used,
see the release notes...

通过jsapi加载器保持可用的Google Charts版本不再被一致更新.从现在起，请使用新的gstatic loader.js.

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>

这只会更改load语句...

this will only change the load statement...

来自...

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

到...

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

---

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

---

next, you don't need to use the callback every time you need to draw a chart,
it only needs to be used once, to ensure google charts has been loaded.

有多种使用回调的方法，
您可以使用更新的setOnLoadCallback功能.

and there are several ways to use the callback,
you can use the updated setOnLoadCallback function.

google.charts.setOnLoadCallback(drawChart);

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

or you can place the callback directly in the load statement.

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

或者我更喜欢的是它返回的承诺. (谷歌包括针对IE的Promise Polyfill)

or what I prefer, the promise it returns. (google includes a promise polyfill for IE)

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

---

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

---

now to the question at hand,
google's load statement will wait for the document to load by default,
so you can use google.charts.load in place of $(document).ready

建议先加载google，然后使用ajax获取数据，然后绘制图表.

recommend loading google first, then using ajax to get data, then draw your charts.

类似于以下设置...

something similar to the following setup...

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

这篇关于带有jQuery ajax成功函数中的参数的google.setOnLoadCallback的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！