Question

例如，你可以这样做：

<script type="text/javascript">
    function load(arr, callback) {
        for (var i = 0; i < arr.length; i++) {
            var element = document.createElement("script");

            element.setAttribute("type", "text/javascript");
            element.setAttribute("src", arr[i]);

            document.getElementsByTagName("head")[0].appendChild(element)
        }

        callback() // ??? When all loaded
    }
</script>

当所有脚本加载完成后，是否还要进行回调？

Answer 1

尝试以下 JavaScript代码段：

a.addEventListener("load", function() {
    b.addEventListener("load", callback());
});

这可以解决您的问题！

Answer 2

使用vanilla JavaScript可以执行以下操作：

function load(arr, callback) {
    for (var i = 0; i < arr.length; i++) {
        var element = document.createElement("script");

        element.setAttribute("type", "text/javascript");
        element.setAttribute("src", arr[i]);

        document.getElementsByTagName("head")[0].appendChild(element)

        element.addEventListener("load",onLoad);
    }

    var loaded = 0;
    function onLoad(){
        if(++loaded == arr.length){
            callback()
        }
    }
}

您也可以使用承诺，例如已经说过的Halcyon，或者像async这样的其他库。

Answer 3

有可能，但你不需要。脚本按顺序执行。

最好使用Promises在多个异步进程之间进行同步。

您可以执行以下操作：

var p1 = new Promise();
var p2 = new Promise();
when(p1, p2).done(function () {
  // p1 and p2 are complete
});

确切的代码取决于您选择的库/实现。

加载多个元素时的回调

3 个答案: