【问题标题】：Load files and then call a call back function [duplicate]加载文件然后调用回调函数[重复]
【发布时间】：2015-05-27 10:34:33
【问题描述】：

在我的项目中，我默认在index.html 文件中加载一些js 和css 文件。但是我需要稍后使用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();
    }
}

【问题讨论】：

$.getScript() 听起来这正是您所需要的，所以我不明白为什么它不起作用。您能否将您尝试过的代码添加到您的问题中。
控制台也有任何错误？
没有错误，只是每个加载的文件都调用了相同的回调。
我找不到$.getScript :/
google 中jquery getscript multiple 的第一个结果似乎提供了您寻求的确切答案：stackoverflow.com/questions/11803215/…

标签： javascript jquery

【解决方案1】：

仅在需要执行此检查时调用回调函数：

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

【讨论】：

在if 语句之前不必做count++ 吗？
是的，我已经更新了答案。

【解决方案2】：

这是一种使用$.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
});

这是使用 Promise 的一种方式：

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 文件。

【讨论】：