Question

我正在尝试动态加载js文件列表。目前的一切都很好。唯一的问题是我在循环中编写了我的函数，所以我的代码将重复多次。我想要做的是创建一个循环来下载文件，然后确认它们已经加载并执行了func()。

对于我的代码，如果我在循环外写func()，我会收到一条错误消息。意味着在onreadystate之外等我收到错误消息

   function( libs, func ){
            if( typeof func === 'function' ) {


                libs.forEach( function( fileName ) {

                    var script = document.createElement('script');
                    var head   = (document.getElementsByTagName("head")[0] || document.documentElement);
                    script.setAttribute("type", "text/javascript");

                    if (script.readyState){  //IE
                        script.onreadystatechange = function(){
                            if (script.readyState == "loaded" || script.readyState == "complete") {
                                script.onreadystatechange = null;
                                head.remove( script );
                                func();
                            }
                        };
                    } else {  //Others browsers
                        script.onload = function(){
                            head.remove( script );
                            loaded = true;
                            func();
                        };
                    }
                    script.setAttribute("src", fileName);
                    head.appendChild( script );

                });


            }
        }

Answer 1

你真的需要通过自己的功能加载吗？你为什么不使用像requirejs这样的脚本加载器？在这里你可以找到其他的：https://stackoverflow.com/questions/12779565/comparing-popular-script-loaders-yepnope-requirejs-labjs-and-headjs

Answer 2

我不确定我是否理解正确，但您希望在下载所有文件时执行您的功能？最常见的方法是拥有一个柜台。我在做类似的事情时使用了这个函数，它接受一个可以在每个文件加载后执行的函数，以及一个在加载所有文件时执行的函数。

我使用以下函数来跟踪加载的文件数。

function loadJs(files, perFileCallback, doneCallback){
    var numFiles = files.length,
        numFilesLoaded = 0,
        loadedFiles = [],
        fileOrder = {};

    if(numFiles === 0){
        doneCallback([]);
        return;
    }

    function _loadFileCallback (file, fileName) {
        numFilesLoaded++;
        loadedFiles[fileOrder[fileName]] = file; // Must be placed in correct order.
        perFileCallback(numFilesLoaded);
        if (numFiles === numFilesLoaded && perFileCallback) {
            doneCallback(loadedFiles);
        }
    }

    for (var i = 0; i < files.length; i++) {
        fileOrder[files[i]] = i;
        _loadFile(files[i], _loadFileCallback); // Load the file with ajax and perform _loadFileCallback when done.
    }
}

您还可以在 pastebin 上看到我链接使用的所有三个功能。

它使用jQuery，但如果你愿意，你可以用普通的ajax调用交换它。

这也考虑到将文件添加到您的头部时，您可以按正确的顺序执行此操作。这是因为我有一个文件定义了var app，另一个定义了app.mySite，在创建app.mySite之前定义应用程序至关重要。

动态加载javascript文件

2 个答案: