0

javascriptの動的挿入を行う場合、順序が重要になることがあります。onloadプロパティを使用してこれを解決することがあります。ただし、外部のJavaScriptが多数あり、それらのスクリプトを順番にロードする必要がある場合は、どうすればよいでしょうか。

再帰的に定義されたonload関数によってこの問題を解決しました。ただし、効率についてはよくわかりません...これはスクリプトなので、遅延評価を行うと思います....何か助けはありますか？

//recursively create external javascript loading chain
//cautiously add url list according to the loading order
//this function takes a list of urls of external javascript
function loadScript(url) {
  if( url.length == 0) {
    //final function to execute
    return FUNCTION;
  }

  var f = function(){
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url.pop();

    //recursion
    script.onload = loadScript(url) ;
    document.getElementsByTagName("head")[0].appendChild(script);
  }
  return f;
}

function loadScripts(urls) {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = urls.pop();
  script.onload = loadScript(urls) ;
  document.getElementsByTagName("head")[0];.appendChild(script);
}

loadScripts(["aaa.js","bbb.js","ccc.js"]);

ありがとうございました！

-ご迷惑をおかけして申し訳ありません。実際にloadScript（）を呼び出す関数を追加しました。（私はこれが機能することを確認しました。。）

4

3 に答える 3

2

このloadScript関数をどのように使用するかについてのコンテキストは、ここでは私を免れ、おそらく必要以上に混乱しているように見えます。

スクリプトを順番にロードしたい場合は、ロードしたい順序でスクリプトのリストを作成して、最初のスクリプトをロードしてみませんか。ロードが完了したら、リストを更新して、ロードしたばかりのリストを削除し、次のリストをロードします。

これを行うことができ、ブラウザが使用するスクリプト負荷検出メカニズムのいずれかで動作し、次のスクリプトをロードするまでonload関数が呼び出される（またはreadystatechange通知）まで待機するコードを次に示します。

function loadScriptsSequential(scriptsToLoad) {

    function loadNextScript() {
        var done = false;
        var head = document.getElementsByTagName('head')[0];
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.onreadystatechange = function () {
            if (this.readyState == 'complete' || this.readyState == 'loaded') {
                scriptLoaded();
            }
        }
        script.onload = scriptLoaded;
        script.src = scriptsToLoad.shift(); // grab next script off front of array
        head.appendChild(script);

        function scriptLoaded() {
            // check done variable to make sure we aren't getting notified more than once on the same script
            if (!done) {
                script.onreadystatechange = script.onload = null;   // kill memory leak in IE
                done = true;
                if (scriptsToLoad.length != 0) {
                    loadNextScript();
                }
            }
        }
    }

    loadNextScript();
}

var scripts = [a,b,c,d,e,f];        // scripts to load in sequential order
loadScriptsSequential(scripts);

他の人が述べているように、スクリプトをロードするための組み込み関数を備えた非常に便利なフレームワーク（jQueryなど）があります。

于 2011-08-08T22:06:26.540 に答える
0

javascriptへのリンクを正しい順序で追加してから、jQueryなどのjavascriptライブラリの使用を開始してみませんか？

于 2011-08-08T21:51:09.603 に答える
0

使用できる「ロード完了の検出」方法があります。デモのこのリンクを見てください。

于 2011-08-08T21:52:50.193 に答える