等待JavaScript中的动态文件加载

我想通过代码加载一些css文件和js文件。我知道这是异步的，所以我必须使用回调

我必须支持IE 9。

My

initilizer.js

执行此代码

this.importCascadingStyleSheet = function(path, callback){ // load CSS file
        var element = document.createElement("link");
        element.setAttribute("rel", "stylesheet");
        element.setAttribute("type", "text/css");
        element.setAttribute("href", path);
        this.appendComponent(element, function(){
            callback();
        });
    }

    this.importScript = function(path, callback){ // load JS file
        var script = document.createElement('script');
        script.src = path;
        script.type = "text/javascript";
        this.appendComponent(script, function(){
            callback();
        });
    }

    this.appendComponent = function(cmp, callback){
        document.head.appendChild(cmp);
        callback();
    }

    this.getLibPath = function(){
        var dir = document.querySelector('script[src$="initilizer.js"]').getAttribute('src');
        var fileName = dir.split('/').pop();
        var parentDir = dir.replace('/' + fileName, ""); 
        var directoryName = parentDir.split('/').pop();
        return parentDir.replace('/' + directoryName, ""); 
    }

    this.importStyle = function(fileName, callback){ // import css file with name
        this.importCascadingStyleSheet(this.libPath + "/style/" + fileName + ".css", function(){
            callback();
        });
    }

    this.importSource = function(fileName, callback){ // import script with name
        this.importScript(this.libPath + "/client/" + fileName + ".js", function(){
            callback();
        });
    }

    var me = this;

    me.libPath = me.getLibPath();

    me.importStyle("myCssFile", function(){
        me.importSource("firstCodeFile", function(){
            me.importSource("secondCodeFile", function(){
                me.importSource("thirdCodeFile", function(){
                    // ... Execute Script code here
                    var foo = new Bar();
                })
            })    
        })
    });

不知怎的，在这些回调中，代码崩溃了，因为其他js文件仍然没有加载。它们仍然具有挂起状态

---

我如何解决这个问题？

我必须支持IE 9。

你必须支持连微软都不支持的浏览器，而且市场份额不到1%。如果你真的需要支持较旧的浏览器，试着进入transpiling&polyfilling，不要浪费时间为过时的浏览器编码，你可以做一些更好的事情……很抱歉，这是我的工作。我们的客户使用过时的软件，然后执行我的第二个选项，以及pollyfill和Transbile。它将在IE9中工作，然后您可以使用Promissions/async/await，这将使您的生活更加轻松。另外，如果你想鼓励你的客户更新浏览器，给他们一个大大的警告，使用不受支持的浏览器可能会导致病毒等。令人惊讶的是，当您告诉客户时，他们突然想要升级……）您的

appendComponent

方法立即调用

回调

，它不等待任何东西。就好像是同步编写的，没有任何回调。您需要将回调作为脚本/样式表元素上的

onload

处理程序安装，但是请注意，正在加载的文件和已计算的文件仍然是两件不同的事情。