正确检查 Javascript 的加载答案

【问题标题】：Check loading of Javascript properly正确检查 Javascript 的加载
【发布时间】：2015-10-12 06:06:08
【问题描述】：

我有 10 个 js 文件。我在加载 java 类之前加载所有文件。但我需要检查所有文件是否正确加载，然后调用我的 java 类。

首先我调用一个js文件来加载我所有需要的js文件，这里我需要检查我的所有10个js文件是否正确加载然后我需要调用一个函数。

这是我的代码

loadpackage("0.js",callback);
loadpackage("1.js",callback);
loadpackage("2.js",callback);
loadpackage("3.js",callback);
loadpackage("4.js",callback);
loadpackage("5.js",callback);
loadpackage("6.js",callback);
loadpackage("7.js",callback);
loadpackage("8.js",callback);
loadpackage("9.js",callback);
loadpackage("10.js",callback);


function loadpackage(path, callback) {

    var done = false;
    var scr = document.createElement('script');

    scr.onload = handleLoad;
    scr.onreadystatechange = handleReadyStateChange;
    scr.onerror = handleError;
    scr.src = path;
    document.body.appendChild(scr);

    function handleLoad() {
        if (!done) {
            done = true;
            callback(path, "ok");
        }
    }

    function handleReadyStateChange() {
        console.log("readystate1");
        var state;

        if (!done) {
            console.log("readystate2");
            state = scr.readyState;
            console.log("readystate3");
            if (state === "complete") {
                console.log("readystate4");
                handleLoad();
            }
        }
    }
    function handleError() {
        if (!done) {
            done = true;
            callback(path, "error");
        }
    }
}

function callback(path, message) {
    console.log(path+" :: "+message);
}

我在某些地方读到 onreadystatechange 事件告诉文件已成功加载，但此处 onreadystatefunction 未调用。

所以请帮我解决这个问题，如何检查我的所有 10 个 js 文件是否正确加载。

有些问题使用 jQuery 回答了这个问题，但我不能使用 jQuery，我需要 JavaScript 或 GWT 中的答案

框架：GWT 2.6.0
我正在研究 GWT，其中使用了 Java 类并执行一些我需要加载 js 文件的操作

【问题讨论】：

How to detect if javascript files are loaded的可能重复
是的，但我不能使用 jquery
我要做的第一件事就是把所有的 .js 文件放到一个文件中
对我来说不可能，实际上构建应用程序需要分离文件
您使用的是java 还是javascript？它们不是同一种语言。 Java 之于 JavaScript 就像“ham”之于“仓鼠”

标签： javascript gwt dynamic onreadystatechange

【解决方案1】：

创建一些计数器，然后在每次onload 回调触发时将其递减。当它达到 0 时，做你需要的。

var scripts = ['1.js', '2.js', ...]
var scriptsToLoad = scripts.length

scripts.forEach(loadScript)

function loadScript (path) {
  var scr = document.createElement('script')

  scr.onload = function () {
    scriptsToLoad -= 1

    if (scriptsToLoad === 0) doYourJavaThing()
  }

  scr.src = path
  document.body.appendChild(scr)
}

function doYourJavaThing () {
  // la la la
}

【讨论】：

onload 函数何时触发？它在脚本开始加载时触发还是在脚本完全加载时触发？
@nils 谢谢。到 OP：它在脚本完成加载时触发。 developer.mozilla.org/en/docs/Web/API/…
注意：这可能会导致脚本被乱序执行（例如，如果2.js在1.js之前完成下载，那么2将在1之前执行，demo）。如果这不是问题，则此方法可以正常工作。否则，您需要按顺序加载它们：demo

【解决方案2】：

正如我所见，在这种情况下您将不得不使用 Promise，这意味着您的加载脚本的函数可以非常方便地返回这样的承诺：

//Change your function to this:
function loadpackage( path, resolve, reject ) {

    var done = false;
    var scr = document.createElement('script');

    scr.onload = handleLoad;
    scr.onreadystatechange = handleReadyStateChange;
    scr.onerror = handleError;
    scr.src = path;
    document.body.appendChild(scr);

    function handleLoad() {
        if (!done) {
            done = true;
            resolve( { path:path,status:'ok' } );
        }
    }

    function handleReadyStateChange() {
        console.log("readystate1");
        var state;

        if (!done) {
            console.log("readystate2");
            state = scr.readyState;
            console.log("readystate3");
            if (state === "complete") {
                console.log("readystate4");
                handleLoad();
            }
        }
    }
    function handleError() {
        if (!done) {
            done = true;
            reject( { path:path,status:'error' } );
        }
    }
}

//Use promises


var promises = [];

promises.push( new Promise( function( resolve,reject ){

    loadpackage( "0.js", resolve, reject )

}) );
promises.push( new Promise( function( resolve,reject ){

    loadpackage( 'path', resolve, reject )

}) );
promises.push( new Promise( function( resolve,reject ){

    loadpackage( "1.js", resolve, reject )

}) );

//...etc

//And finally wait untill all of them are resolved

Promise.all( promises ).then( function( value ){

    //Here you absolutely know that all files have loaded, 
    //and you can fire callback here for each of them like

    callbak( value.path, value.status );

});

【讨论】：