Scriptの実行順序に関して

Scriptの実行順序が理解できていないので、ご教示いただけないでしょうか？

以下の様なコードを記載した時、<head>部分に記載した「スクリプト１」よりも

<body>部に記載した「スクリプト２」の方が早く実行されるのですが、一体、どのような順番で処理されるのか、初心者向けにご教示いただけないでしょうか？

JavaScript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>Title</title>
6    <script src="../../jQuery/jquery-3.3.1.min.js"></script>
7    <script> // スクリプト１
8     $.get("./test.json", function(data){
9         hoge = $.parseJSON(data);
10      });
11    </script>
12</head>
13<body>
14    <div>Get external text test</div>
15    <script>　// スクリプト２
16   	   alert(hoge[0].name);
17    </script>
18</body>
19</html>
20

行動規範の内容に同意します

回答3件

<head>部分に記載した「スクリプト１」よりも<body>部に記載した「スクリプト２」の方が早く実行されるのですが、

いえ、$.get自体はalertより先に実行されて、通信が始まります。

通信が完了してようやく$.getのコールバック関数が実行されます。

投稿2018/05/22 09:28

maisumakun

総合スコア145183

Yasu0421

2018/05/22 09:37

ご回答ありがとうございます。 Chromeでステップ実行して確認しているのですが、先にalertを表示しようとしているためスクリプト１でグローバル変数としてhogeにパースしたはずのデータがnot definedとなる模様です。スクリプト２の中にalertを記載すると問題なく表示されるのですが、何か根本的に認識を誤っているのでしょうか？

maisumakun

2018/05/22 09:58

はい、実行順序は多くの場合、「$.get自体の実行」→「下部のalert」→「（通信終了時に）$.getに渡した関数の実行」となって、下部の実行は通信終了を待ちません。

Yasu0421

2018/05/22 22:30

分かりやすいご説明いただき有難うございます。スクリプトの実行順序というよりも、関数の実行順序の問題だと理解いたしました。実行順序に依存関係があるような場合は、ステートマシンのような仕組がいるのですね（コールバック関数といった）。どうもありがとうございました。大変助かりました

行動規範の内容に同意します

ベストアンサー

試しに

html
1<script> // スクリプト１
2  $.get("./test.json", function(data){
3    hoge = $.parseJSON(data);
4    alert(hoge[0].name);
5  });
6</script>

または

html
1<script> // スクリプト１
2  $.get("./test.json", function(data){
3    hoge = $.parseJSON(data);
4  });
5  alert("Getting JSON!");
6</script>

と記述して実行してみてはいかがでしょうか。 $.get は非同期処理ですので通信が完了するまで待ってくれるわけではなく、すぐに次の処理に移行します。コールバック関数 function(data){...} は通信が終わった後に初めて実行されます。

投稿2018/05/22 09:47

mather

総合スコア6753

Yasu0421

2018/05/22 22:22

ご回答いただきありがとうございます。上記の件は、既に確認済でしてこの場合だとhogeが表示されます。本題のスクリプトの実行順番のご回答の結論としては、・「スクリプト１」「スクリプト２」を分けて記載しても、1つのスクリプ　トとして扱われる・$.getは非同期であるため、後段のスクリプトに記述された処理が先に　実行されるので、処理を意識するにはコールバック関数で制御する必要　が発生するということですね。理解いたしました。どうもありがとうございました。

mather

2018/05/23 01:08

「$.getは非同期であるため、後段のスクリプトに記述された処理が先に実行される」この部分での理解で少し気になりました。今回のケースではスクリプト２がとても軽量な処理なのでコールバックより先に実行されると思いますが、必ずこの順序というわけでもなく、非同期になるとコールバック関数がどんなタイミングで実行されるかわからないと思っていてください。

行動規範の内容に同意します

いただいたアドバイスから、以下のようにコードを修正することで
所期を満足することができることが分かりました
初心者にとっては、大変勉強になりました。
ご回答いただきありがとうございました。

JavaScript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>Title</title>
6    <script src="../../jQuery/jquery-3.3.1.min.js"></script>
7    <script>
8      $.when(
9        $.get("./test.json", function(data){
10          hoge = $.parseJSON(data)
11        })
12      ).done(function(){
13        alerthoge();
14      });
15
16    </script>
17</head>
18<body>
19    <div>Get external text test</div>
20    <script>
21      var alerthoge = function(){
22   	   alert(hoge[0].name);
23      }
24    </script>
25</body>
26</html>