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

在我的项目中，默认情况下，我正在

index.html

文件中加载一些

js

和

css

文件。但是我需要稍后（动态地）使用javascript加载其他一些

js

/

css

文件，然后在成功加载这些动态文件之后，我需要调用回调函数

我选中了，它在加载每个文件后调用回调函数，但并不是所有文件都加载了

我试过这个：

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

函数加载文件（有效负载、callbackFunc）{
var head=document.head | | document.getElementsByTagName（“head”）[0]；
var fileref=null；
if（payload.js）{
var js=payload.js；
对于（var i=0；i

请有人帮我解决这个问题

答复: 不知怎的，下面的答案对我不起作用。我无法在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();
    }
}

函数加载文件（列表，fn）{
var计数器=0；
var head=document.head | | document.getElementsByTagName（“head”）[0]；
对于（变量i=0；i

要仅在需要执行此检查时调用回调函数，请执行以下操作：

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

---

以下是使用

$.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
});

函数getScripts（列表，fn）{ var cntr=list.length； 对于（变量i=0；i 这里有一种使用承诺的方法：

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
});

函数获取脚本（列表）{
var承诺=[]；
对于（变量i=0；i

---

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

$.getScript（）听起来它正是您所需要的，所以我不明白为什么它不起作用。请将您尝试过的代码添加到您的问题中。控制台中还有错误吗？没有错误，只是对每个加载的文件调用了相同的回调。我找不到

$。getScript

：/google for中的第一个结果似乎提供了您所寻求的确切答案：在

if

语句之前，您不必执行

count++

吗？是的，我已经更新了答案。