4

私は10個のjsファイルを持っています。Java クラスをロードする前にすべてのファイルをロードしています。しかし、すべてのファイルが正しくロードされていることを確認する必要があり、それから Java クラスを呼び出します。

まず、必要なすべての js ファイルをロードする 1 つの js ファイルを呼び出します。ここでは、適切にロードされた 10 個の js ファイルすべてを確認する必要があり、次に 1 つの関数を呼び出す必要があります。

ここに私のコードがあります

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
Javaクラスが使用されているGWTに取り組んでおり、jsファイルをロードする必要があるいくつかの操作を実行しています

4

2 に答える 2

2

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
}
于 2015-10-12T06:28:13.387 に答える
1

ご覧のとおり、この場合は Promise を使用する必要があります。つまり、スクリプトをロードする関数は、次のような 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 );

});
于 2015-10-12T06:34:23.120 に答える