ロックアップなしで遅延読み込みオブジェクトを待っていますか？

Question

私は既に要求に応じてスクリプトを読み込み遅延させるコードを持っています。私の問題は、オブジェクトが利用可能になるまで、特定のコードを実行するのを待っています。実行をブロックしないので、setTimeout（）を使用することはできません。

ブラウザをロックせずに読み込みを待つ良い方法は何ですか？

この場合も、生のsetTimeout（）は使用できません。

Answer 1

スクリプトの内容を制御していると仮定すると、遅延ロードされたスクリプトの最後に実行するコードをいくつか入れて、スクリプトがロードされたことをメインページに示すことができます。たとえば、あなたのページでは、このような何かを行うことができます：あなたがして、この例を盛り上げることができ

loadedScript(); 

：

スクリプトで次に

var loadingScripts = 0; 
var loadScript = function() { 
    // Do what you need to do to load the script... 

    loadingScripts++; 
} 

var loadedScript = function() { 
    loadingScripts--; 
    if (loadingScripts == 0) { 
     // Kick off execution of code that requires the lazy loaded scripts. 
    } 
} 

は、あなたが一番下にこのコードを追加したいです配列の代わりに整数（特定のスクリプトがロードされたことを記録するため）。特定の関数呼び出しを特定のスクリプトの完了と関連付ける代わりに、オブジェクトを使用することもできます。私は私の例を単純なものにしていましたが、コードをどのように拡張するかを私に見せたいかどうか尋ねます。

---

ここでは、スクリプトの読み込み時に特定のコードの実行を続けるためにコールバックを使用する方法を示します（スクリプト自体を制御しているとします）。

var scriptCallbacks = {} 
var loadScript = function(scriptname, callback) { 
    // Do what you need to load scriptname 

    scriptCallbacks[scriptname] = callback; 
} 

var loadedScript = function(scriptname) { 
    (scriptCallbacks[scriptname])(); 
} 

スクリプトをロードするときに、あなたはこのような何かを...

var callback = function() { 
    // Write exactly what you want executed once your script is loaded 
} 

loadScript("MyScript.js", callback); 

そして再び、あなたの怠惰なロードされたスクリプトでは、ちょうどあなたに知らせるために、下にこのコードを追加します電話へのコールバック：

loadedScript("MyScript.js"); 

Answer 2

私はダニエルが言及したものと実際は違うでしょう。すべての要素が読み込まれるとloadイベントが発生し、コンテンツを評価した後にjavascriptファイルが読み込まれます。だから、彼らの可能な後に実行を継続するためにイベントハンドラを設定することができます。

var loadScript = function(fileName, callback) { 
    var head = document.getElementsByTagName('head')[0]; 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = fileName; 

    script.onload = callback; 
    script.onreadystatechange = function() { 
     if(this.readyState == 'complete') { 
      callback(); 
     } 
    }; 
    head.appendChild(script); 
}; 

と使用例：

var bar = function() { 
    Foo.baz(); 
}; 
if(!window.Foo) { 
    loadScript('Foo.js',bar); 
} else { 
    bar(); 
}