加載多個元素時回調

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

使用原始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 。

Answer 3

可以，但是您不需要。 腳本按順序執行。

---

多個異步進程之間的同步最好由Promises完成。

您可以執行以下操作：

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

確切的代碼取決於您選擇的庫/實現。