jQueryがJavascript（js）ファイル内にロードされています

Question

これはjQueryをロードするはずの非常に簡単なスクリプトです。私はjqueryのがロードされてFirebugのスクリプトタブで見ることができますが、私はそれを使用しようとすると、$は、「エラーを定義されていません」を取得。誰も私が間違っているのか理解に役立つことはできますか？

//function to add scripts 
function include(file) 
{ 
    var script = document.createElement('script'); 
    script.src = file; 
    script.type = 'text/javascript'; 
    script.defer = true;  
    document.getElementsByTagName('head').item(0).appendChild(script); 
} 
//add jQuery 
include('https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'); 

//See if jQuery is working 
$(document).ready(function() { 
    $('#internal').show(); 
}) 

//////////// 
//RETURNS: "$ is not defined $(document).ready(function() {" 

奇妙なことがあればドンであります「Tは、私がこれで何かアドバイスに感謝、それは

//function to add scripts 
function include(file) 
{ 
    var script = document.createElement('script'); 
    script.src = file; 
    script.type = 'text/javascript'; 
    script.defer = true;  
    document.getElementsByTagName('head').item(0).appendChild(script); 
} 
//add jQuery 
include('https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'); 

//add my custom script that wants to use jQuery 
include('scripts/testScript.js') 

testScript.js

$(document).ready(function() { 
    $('#external').show(); 
}) 

に動作します代わりに私はjQueryのを使用する別のjsファイルをロードし、この同じスクリプトでのjQueryを使用してみてください。

Answer 1

ブラウザは、現在のファイルの実行が終了した後に追加したスクリプトノードでのみJavaScriptを実行するためです。

ブラウザは、現在のスクリプトを1つのスレッドで実行します。スクリプトの終わりに達すると、DOM内の次のスクリプトが実行されます。 1つのスクリプトを実行して次のスクリプトにジャンプすることはできません。

GoogleのJavaScript loaderをご覧ください。動作する方法は、外部のjsファイルをロードし、そのファイルがロードされたときに実行するコールバックを登録するように指示することです。

コールバック内のコードは、ブラウザが現在のファイルの実行を終了して次のファイルに移動した後にのみ実行されるため、コールバックで実行できます。あなたはできません。はできますが、ブラウザは1つのjsファイルから別のjsファイルに切り替わります（つまり、ファイルの内容を最初に実行しているとき）。

Answer 2

スクリプトファイルを動的に追加すると、残りのjavascriptが実行されるまでファイルは実行されません。したがって、例では、1つのjQueryソースがjQueryコードの下にプッシュダウンされるため、undefinedが返されます。

2つのファイルが動的に追加され、追加された順に下にプッシュダウンされるため、jQueryソースが実行され、jQueryコードが実行されるためです。

Answer 3

したがって、javascriptを使用してjQueryをロードすると、ファイルが非同期にロードされます。あなたのコードはjQueryをロードし始め、次にdocument.readyコードを呼び出すために移動します.jQueryのロードが完了していないか、実行を開始していないために失敗します。

2つのインクルードを使用すると、2つ目のファイルが実行されるまでに各ファイルがロードされます。最初のファイルはすでに実行されています。

jQueryがロードされると、ドキュメント準備タスクが実行され、jQueryを必要とする他のコードが実行されるように、コールバックを設定する必要があります。

Answer 4

他の回答で説明したように、jqueryは非同期に読み込まれるため、$（document）.ready（）を呼び出すときには、jqueryはまだネットに読み込まれています。例えば、ここで

function include(file){ 
    var script = document.createElement('script'); 
    script.src = file; 
    script.type = 'text/javascript'; 
    script.defer = true; 
    script.onload= function(){ 
     $(document).ready(function() { 
     //your code here 
     }) 
    } 
    document.getElementsByTagName('head').item(0).appendChild(script); 
} 
//add jQuery 
include('https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'); 

ルック：あなたはスクリプト要素のonloadイベントハンドラに独自のコードを追加することでこの問題を回避することができます http://jsfiddle.net/CrReF/