回答編集履歴
1
校生
test
CHANGED
|
@@ -12,31 +12,33 @@
|
|
|
12
12
|
|
|
13
13
|
JSはシングルスレッドで動作します。
|
|
14
14
|
|
|
15
|
-
JSの実行中はブラウザの応答が完全に止る仕様
|
|
15
|
+
JSの実行中はブラウザの応答が完全に止る仕様であるためスリープみたいなことは実現不可能です。
|
|
16
16
|
|
|
17
|
-
とにかくさっさと実行して終
|
|
17
|
+
とにかくさっさと実行して終了させる必要がある。
|
|
18
18
|
|
|
19
19
|
|
|
20
20
|
|
|
21
|
-
しかし、そこで壁になるのがI/O処理
|
|
21
|
+
しかし、そこで壁になるのがI/O処理です。
|
|
22
22
|
|
|
23
|
+
ファイルの読み書き・ネットワークのリクエスト……といった事は処理にいくら時間がかかるのか読めない部分があります。
|
|
24
|
+
|
|
23
|
-
Ajaxの為にHTTPリクエスト投げた瞬間ブラウザが
|
|
25
|
+
Ajaxの為にHTTPリクエスト投げた瞬間ブラウザが固まるとかユーザビリティ糞じゃん。
|
|
24
26
|
|
|
25
27
|
|
|
26
28
|
|
|
27
29
|
そこで、JSはイベント駆動という考え方をします。
|
|
28
30
|
|
|
29
|
-
ブラウザが用意し
|
|
31
|
+
ブラウザが用意している「イベント置き場」というのがありまして、
|
|
30
32
|
|
|
31
|
-
こ
|
|
33
|
+
そこに「イベント完了条件」と「実行したい内容の関数」をセットで登録します。
|
|
32
34
|
|
|
33
35
|
|
|
34
36
|
|
|
35
|
-
ブラウザ
|
|
37
|
+
ブラウザ内では無数のイベントが飛び交っています。
|
|
36
38
|
|
|
37
39
|
「マウスカーソルが動いた時」「HTTP通信が完了した時」「マウスで何かの要素をクリックした時」
|
|
38
40
|
|
|
39
|
-
|
|
41
|
+
ブラウザは絶えずイベント置き場を巡回しており、完了したイベントが見つかり次第対応する関数を実行という事を行っています。
|
|
40
42
|
|
|
41
43
|
|
|
42
44
|
|
|
@@ -64,13 +66,23 @@
|
|
|
64
66
|
|
|
65
67
|
get_user_nameの中身はrequestによりHTTPリクエストを発射しているはずなので、
|
|
66
68
|
|
|
67
|
-
待ちぼうけするには長いので、そのコールバック関数はそのまんまイベント完了時に実行される関数
|
|
69
|
+
待ちぼうけするには長いので、そのコールバック関数はそのまんまイベント完了時に実行される関数に登録します。
|
|
70
|
+
|
|
71
|
+
そのまま「イベント登録終わったから次いこう」と関数の処理が終わります。
|
|
68
72
|
|
|
69
73
|
|
|
70
74
|
|
|
71
|
-
|
|
75
|
+
イベントの巡回＆コールバック関数を取り出して実行されるタイミングは、
|
|
72
76
|
|
|
77
|
+
JSの実行が全て完了して暇になってからです。
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
なので、例えローカルマシン内で次の行が実行される前に結果を受け取ったとしても、
|
|
82
|
+
|
|
73
|
-
`console.log(result_txt);`が実行され
|
|
83
|
+
質問文のコードでは先に`console.log(result_txt);`が実行されます。
|
|
84
|
+
|
|
85
|
+
終わって暇になり、イベントの巡回を待ってからコールバック関数が実行されて`result_txt`変数の中身が書き換わります。
|
|
74
86
|
|
|
75
87
|
|
|
76
88
|
|
|
@@ -78,17 +90,31 @@
|
|
|
78
90
|
|
|
79
91
|
解決法は単純、「コールバック関数の中身で後続のやりたい処理を全部書け」
|
|
80
92
|
|
|
81
|
-
|
|
93
|
+
何の解決にもなりませんが、こうすれば使えます。
|
|
82
94
|
|
|
83
95
|
|
|
84
96
|
|
|
85
|
-
|
|
97
|
+
```JavaScript
|
|
86
98
|
|
|
99
|
+
get_user_name(options,function (error, respinse,body ){
|
|
100
|
+
|
|
101
|
+
result_txt=(body.user.profile.display_name).toString;
|
|
102
|
+
|
|
87
|
-
|
|
103
|
+
console.log(result_txt);
|
|
104
|
+
|
|
105
|
+
})
|
|
106
|
+
|
|
107
|
+
```
|
|
88
108
|
|
|
89
109
|
|
|
90
110
|
|
|
111
|
+
「後続のやりたい処理を全部書け」って中々クレイジーですね。
|
|
112
|
+
|
|
113
|
+
非同期処理でやりたい事が増えれば増える程ネストが深くなり糞みたいなコードになります。
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
|
|
91
|
-
これ
|
|
117
|
+
これを「コールバック地獄」と呼びます。
|
|
92
118
|
|
|
93
119
|
|
|
94
120
|
|
|
@@ -100,9 +126,17 @@
|
|
|
100
126
|
|
|
101
127
|
|
|
102
128
|
|
|
103
|
-
|
|
129
|
+
ベストプラクティスを紹介します。
|
|
104
130
|
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
まずはPromiseを覚えて使いましょう。
|
|
134
|
+
|
|
135
|
+
ある程度使いこなせるようになったらasync/awaitという構文を覚えましょう。
|
|
136
|
+
|
|
137
|
+
|
|
138
|
+
|
|
105
|
-
|
|
139
|
+
async/awaitはPromiseを良い感じに扱う糖衣構文で、
|
|
106
140
|
|
|
107
141
|
ここまで学習が進めば非同期処理は全く怖くありません。
|
|
108
142
|
|