加载多个元素时回调

Callback when multiple elements loaded

本文关键字：回调 元素 加载      更新时间：2023-09-26

例如，您可以这样做：

<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>

当所有脚本都加载完毕时，是否需要进行回调？

使用香草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()
        }
    }
}

您也可以使用promise，比如Halcyon已经说过的，或者其他一些库，比如async。

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

多个异步进程之间的同步最好使用Promises来完成。

你可以做一些类似的事情：

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

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

尝试以下JavaScript片段：

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

这应该能解决你的问题！

相关文章：