在 ajaxComplete 之后加载 javascript答案

【问题标题】：Loading javascript after ajaxComplete在 ajaxComplete 之后加载 javascript
【发布时间】：2015-07-13 11:53:00
【问题描述】：

我正在尝试通过 AJAX 添加 Google 图表，但在 Firebug 中我得到了：

ReferenceError: google is not defined

我发送的 AJAX 如下所示：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawVisualization);

    etc etc...

</script>

我假设第一个脚本没有加载。我将如何解决这个问题？我尝试在 ajaxComplete 之后加载，但无法正常工作。

【问题讨论】：

将 google 函数包装在 DOM 就绪函数中会发生什么？
但是我通过 AJAX 将这 2 个脚本发送到页面（页面加载后）。那不是说 DOM 已经准备好了？
@user537137 所以如果你在文档解析后加载这个脚本，这个脚本是异步加载的。因此，在脚本的 onload 处理程序中设置逻辑，包括 google jsapi。现在我想知道，你如何在页面上包含这些脚本？请注意，如果 google jsapi 正在使用任何窗口 onload 事件进行初始化，则不能使用这种方式加载 goggle 脚本
I'm assuming that the first script is not loading 怎么样？？？分享有关如何在页面上附加这些脚本的相关代码
这 2 个脚本是我作为 AJAX 响应发送回页面的“HTML”。我知道这是错误的，但不知道正确的方法是什么（甚至可能是正确的术语）

标签： javascript jquery ajax google-visualization

【解决方案1】：

如果你想等到你的库加载，你可以定期检查它是否被加载，当你检测到它时，你可以执行你的代码。我的解决方案基于answer。

添加一个Javascript函数来检查：

function whenAvailable(name, callback) {
    var interval = 10; // ms
    window.setTimeout(function() {
        if (window[name]) {
            callback(window[name]);
        } else {
            window.setTimeout(arguments.callee, interval);
        }
    }, interval);
}

然后添加一个代码来检查您是否加载了谷歌，并在加载后从内部运行代码

whenAvailable("google", function(t) {
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawVisualization);

    etc etc...
});

您可以自定义间隔。这是一个有用的模式。

【讨论】：