关于gwt：正确检查Javascript的加载


Check loading of Javascript properly

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

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

这是我的密码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
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文件的操作。

相关讨论

正如我看到的，在这种情况下，您必须使用promise，这意味着加载脚本的函数对于返回这样的promise非常方便：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
//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 );

});

创建一些计数器，然后在每次onload回调触发时递减它。当它达到0时，执行您需要的操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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
}
相关讨论