如何确定脚本何时加载和执行

Question

我需要在脚本加载并执行后运行一些代码。我的代码似乎在大多数时候都可以正常工作，但偶尔会在脚本实际执行之前运行。

在我加载的脚本中

var script_loaded = true;

我正在加载它：

// Handle Script loading - borrowed from jquery
var done = false;
script.onload = script.onreadystatechange = function() {
    if (!done
        && (!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) {
        done = true;
        expect(script_loaded).to.be.true; //chai testing
    }
};
document.head.appechChild(script);

此测试将失败， script_loaded 大约10％的时间未定义（在Chrome中测试）。

无论如何确保加载的脚本在继续之前实际运行，而不知道所述脚本的内容？

谢谢你的时间！

Answer 1

我认为一个简单的解决方案是在主脚本或页面放置：

if(!window['zw']) window['zw']={};
zw.scriptLoaded=false;
zw.makeLoaded=function()
{
    this.scriptLoaded=true;
    alert('script has been loaded!');
}

然后在你的loadinng脚本的末尾：

if(!window['zw']) window['zw']={};
if(zw.makeLoaded) zw.makeLoaded();

我认为这对你有用。如果要加载多个文件，您可以创建一个类来处理负载。这是另一种方法，但它有效。

希望它有所帮助！

Answer 2

解决。这与加载顺序的随机性以及某些脚本（取决于该加载顺序）有关。一次处理每一个似乎已经解决了这个问题。

如果有人关心使用它，这是我的代码...

修改

我更新了代码以更好地演示概念

   function loadScriptList(list, callback) {
    var queue = [];

    var process = function() {
        if (queue.length === 0) {
            callback();
            return;
        }

        //remove next loader from queue and call it
        queue.shift().apply();
    };

    //returns a loader function that can be processed in a queue
    var createLoader = function(src) {
        return function() {
            console.log("Loading " + src)
            var script = document.createElement('script');
            script.setAttribute('src', src);
            // Handle Script loading - borrowed from jquery
            var isLoaded = false;
            script.onload = script.onreadystatechange = function() {
                //process the next item in the queue when ready
                if (!isLoaded
                    && (!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) {
                    console.log("Done.");
                    isLoaded = true;
                    process();
                }
            };
            document.head.appendChild(script);
        };
    };

    //build a queue of load functions, then process it
    list.forEach(function(src) {
        queue.push(createLoader(src));
    });
    process();
}

function loadComplete() {
    alert("Load Complete");
}

loadScriptList(['script_01.js', 'script_02.js', 'script_03.js'], 
               loadComplete);