按顺序异步加载JS脚本(等待上一个脚本完成)

Load JS scripts asynchronously in order (waiting the previous one is complete)

本文关键字:脚本 上一个 等待 异步 加载 JS 顺序      更新时间:2023-09-26

我正在尝试使用谷歌地图。InfoBox,但在加载这个脚本之前,必须加载GoogleMapsneneneba API。

现在我有这个代码来加载所有内容:

/**
 * Load scripts asynchronously
 */
function loadScript() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.googleapis.com/maps/api/js?key=-MY-KEY-&sensor=true&callback=initialize";
    document.body.appendChild(script);
    var scriptInfoBox = document.createElement("script");
    scriptInfoBox.type = "text/javascript";
    scriptInfoBox.src = "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js";
    document.body.appendChild(scriptInfoBox);
}

但并不总是在加载GoogleMaps之前加载GoogleMapsneneneba API。信息框一。

如何加载JS排序,等待完成上一个

您可以使用脚本的load事件:

function loadScript(callback) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.googleapis.com/maps/api/js?key=-MY-KEY-&sensor=true&callback=initialize";
    document.body.appendChild(script);
    script.onload = function() {
        var scriptInfoBox = document.createElement("script");
        scriptInfoBox.type = "text/javascript";
        scriptInfoBox.src = "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js";
        document.body.appendChild(scriptInfoBox);
        scriptInfoBox.onload = callback;
    };
}

但是,您需要对代码进行一些调整,使其像这样跨浏览器安全。

只需在</body>之前使用常规脚本标记。

<script src="http://maps.googleapis.com/maps/api/js?key=-MY-KEY-&sensor=true&callback=initialize"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js"></script>

默认情况下,浏览器将按脚本出现的顺序执行脚本。