加载文件，然后调用回调函数

Question

在我的项目中，我默认在js文件中加载了一些css和index.html个文件。但我需要稍后使用javascript加载一些其他js / css文件（动态），然后在成功加载这些动态文件后，我需要调用回调函数。

我检查了jQuery.getScript()，它在加载每个文件后调用了回调函数，但并未加载所有文件。

我试过了：

function loadFiles(payload, callbackFunc) {
    var head = document.head || document.getElementsByTagName("head")[0];
    var fileref = null;
    if (payload.js) {
        var js = payload.js;
        for (var i = 0; i < js.length; i++) {
            var file = this.getPath("files", js[i]);
            if (!file.loaded) {
                var fileref = document.createElement('script');
                fileref.setAttribute("type", "text/javascript");
                fileref.setAttribute("src", file.path);
                fileref.onreadystatechange = callbackFunc;
                fileref.onload = callbackFunc;
                head.appendChild(fileref);
                file.loaded = true;
            }
        }
    }
    if (payload.css) {
        var css = payload.css;
        for (var i = 0; i < css.length; i++) {
            var file = this.getPath("files", css[i]);
            if (!file.loaded) {
                var fileref = document.createElement('link');
                fileref.setAttribute("rel", "stylesheet");
                fileref.setAttribute("type", "text/css");
                fileref.setAttribute("href", file.path);
                fileref.onreadystatechange = callbackFunc;
                fileref.onload = callbackFunc;
                head.appendChild(fileref);
                file.loaded = true;
            }
        }
    }
}

请有人帮我解决这个问题。

答案：

不知何故，以下答案对我不起作用。我无法在chrome的开发人员工具中看到动态添加的脚本。所以，我最后通过引用@jfriend00的答案来修改我的上述代码：

function loadFiles(list, fn){
    var counter = 0;
    var head = document.head || document.getElementsByTagName("head")[0];
    for (var i = 0; i < list.length; i++) {
        var fileref = document.createElement('script');
        fileref.setAttribute("type", "text/javascript");
        fileref.setAttribute("src", list[i]);
        fileref.onload = function(){
            counter++;
            if(counter === list.length){
                fn();
            }
        }
        head.appendChild(fileref);
    }
    if(list.length === 0){
        fn();
    }
}

Answer 1

以下是使用$.getScript()使用计数器加载多个文件的方法：

function getScripts(list, fn) {
    var cntr = list.length;
    for (var i = 0; i < list.length; i++) {
        $.getScript(list[i], function() {
            --cntr;
            if (cntr === 0) {
                fn();
            }
        });
    }
}

getScripts(["file1.js", "file2.js"], function() {
    // all scripts loaded here
});

这是使用承诺的方式：

function getScripts(list) {
    var promises = [];
    for (var i = 0; i < list.length; i++) {
        promises.push($.getScript(list[i]));
    }
    return $.when.apply($, promises);
}


getScripts(["file1.js", "file2.js"]).then(function() {
    // all scripts loaded here
});

您可以对CSS文件使用这些相同的概念。

Answer 2

只有在需要检查时才能调用回调函数：

var count = 0;
fileref.onload = function() {
    if (payload.js.length + payload.css.length == ++count) {
        callbackFunc();
    }
};