teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問多層構造の配列の最下層の値を使った処理を、非同期で行わずに順番に処理したい。

編集履歴

質問編集履歴

3

処理に時間のかかる関数自体が非同期で行われるものだったため、関数の内容を追記しました。

2019/02/24 02:45

投稿

mayeno26
mayeno26

スコア13

test CHANGED
File without changes
test CHANGED
@@ -7,6 +7,8 @@
7
7
  ### 起こっている現象・問題
8
8
 
9
9
  javascriptのfor文の中で、処理が重い関数があるせいで、いくつかの関数処理が間に合わずに処理が終わってしまいます。
10
+
11
+ 具体的にはbing map apiを用いた住所を緯度経度に変換する関数です。
10
12
 
11
13
 
12
14
 
@@ -50,7 +52,7 @@
50
52
 
51
53
  var s_address = s_arr[s_key].address;
52
54
 
53
- geocodeQuery(s_address); //この処理に時間がかかります
55
+ geocodeQuery(s_address, layer); //この処理に時間がかかります。（関数の中身は下記）
54
56
 
55
57
  }
56
58
 
@@ -114,6 +116,56 @@
114
116
 
115
117
 
116
118
 
119
+ ### 住所を緯度経度に変換する関数
120
+
121
+ ```javascript
122
+
123
+ function geocodeQuery(address, layer) {
124
+
125
+ if(searchManager) {
126
+
127
+ //住所から緯度経度を検索
128
+
129
+ searchManager.geocode({
130
+
131
+ where: address,
132
+
133
+ callback: function (r) {
134
+
135
+ if (r && r.results && r.results.length > 0) {
136
+
137
+ //pinを立てる
138
+
139
+ let pin = new Microsoft.Maps.Pushpin(r.results[0].location, {
140
+
141
+ roundClickableArea: true,
142
+
143
+ });
144
+
145
+ //layerにpinを追加
146
+
147
+ layer.add(pin);
148
+
149
+ }
150
+
151
+ },
152
+
153
+ errorCallback: function (e) {
154
+
155
+ console.log(address + 'は変換失敗');
156
+
157
+ }
158
+
159
+ });
160
+
161
+ }
162
+
163
+ }
164
+
165
+ ```
166
+
167
+
168
+
117
169
  以上です。わかりづらい部分あれば補足いたします。
118
170
 
119
171
  よろしくお願い致します。

2

javascriptの非同期処理初心者なので初心者マークつけさせてもらいました。

2019/02/24 02:45

投稿

mayeno26
mayeno26

スコア13

test CHANGED
File without changes
test CHANGED
File without changes

1

bing map APIの関数自体は本問題に関係ないと思ったので、記載を減らし簡略化しました。

2019/02/24 02:14

投稿

mayeno26
mayeno26

スコア13

test CHANGED
@@ -1 +1 @@
1
- 多重階層の配列を展開するfor文内で処理を終えてから次の処理にいくには？（bing maps API）
1
+ 多層構造の配列の最下層の値を使った処理を、非同期で行わずに順番に処理したい。
test CHANGED
@@ -1,14 +1,36 @@
1
- ### 起こっている現象・問題
1
+ 「もしかしたらこれでうまくいくのでは？」
2
2
 
3
- for文の中で、処理が重い関数があるせいで、いくつかの関数処理が間に合わずにfor分の処理が終わってしまいます。
3
+ というアイデアベースでも大変助かるので、コメントもらえるとありがたいです。。！
4
4
 
5
5
 
6
6
 
7
+ ### 起こっている現象・問題
8
+
7
- 具体的には、bing map apiを用いた「住所から緯度経度を取得する関数」が重く、複数の住所を緯度経度に変える工程の中で、いくつかの住所は緯度経度に変換され、それ以外は変換されません。リロードするたびに、変換される住所とされない住所が変わり、すべてがうまく変換されることはないです。
9
+ javascriptのfor文の中で、処理が重い関数があるせいで、いくつかの関数処理が間に合わずに処理が終わってしまいます。
8
10
 
9
11
 
10
12
 
13
+ 多層構造の配列（下部に例を記載しています）の最下層にある値に対して処理を行う
14
+
15
+ →処理が完了する
16
+
17
+ →次の最下層の値に対して処理を行う
18
+
19
+ →処理が完了する
20
+
21
+ →次の、、、
22
+
23
+
24
+
11
- 多重階層の配列の中での非同期処理の書き方が調べてもわからなかったので、わかる方教えていただけると助かります。
25
+ といった具合に一回一回の処理が完了してから次の処理へ移ることができれば解決するのでは？と考えたのですが、書き方を調べてもわからず困っています。
26
+
27
+
28
+
29
+ わかる方教えていただけると助かります。
30
+
31
+ これ以外のやり方でもできるものがあれば試したいです。
32
+
33
+
12
34
 
13
35
 
14
36
 
@@ -16,23 +38,19 @@
16
38
 
17
39
  ```javascript
18
40
 
19
- function pushPins(arr, layer) {
41
+ for (let r_key in r_arr){
20
42
 
21
- for (let r_key in arr){
43
+ let p_arr = r_arr[r_key].prefectures;
22
44
 
23
- let p_arr = r_arr[r_key].prefectures;
45
+ for (let p_key in p_arr){
24
46
 
25
- for (let p_key in p_arr){
47
+ let s_arr = p_arr[p_key].stores;
26
48
 
27
- let s_arr = p_arr[p_key].stores;
49
+ for (let s_key in s_arr){
28
50
 
29
- for (let s_key in s_arr){
51
+ var s_address = s_arr[s_key].address;
30
52
 
31
- var s_address = s_arr[s_key].address;
32
-
33
- geocodeQuery(s_address, s_arr[s_key].id, layer); //この処理に時間がかかります
53
+ geocodeQuery(s_address); //この処理に時間がかかります
34
-
35
- }
36
54
 
37
55
  }
38
56
 
@@ -42,7 +60,9 @@
42
60
 
43
61
  ```
44
62
 
45
- ### 配列の構造
63
+ ### 多層構造の配列
64
+
65
+ 下記の配列のaddressの値に時間のかかる処理を行いたいです。
46
66
 
47
67
  ```
48
68
 
@@ -94,54 +114,6 @@
94
114
 
95
115
 
96
116
 
97
- ### （念のため）住所から緯度経度を検索し、その緯度経度からpinを生成し、pinの配列に追加する関数
98
-
99
- ```javascript
100
-
101
- function geocodeQuery(query, shopid, layer) {
102
-
103
- if(searchManager) {
104
-
105
- searchManager.geocode({
106
-
107
- where: query,
108
-
109
- callback: function (r) {
117
+ 以上です。わかりづらい部分あれば補足いたします。
110
-
111
- if (r && r.results && r.results.length > 0) {
112
-
113
- let pin = new Microsoft.Maps.Pushpin(r.results[0].location, {
114
-
115
- icon: 'pin.png',
116
-
117
- anchor: new Microsoft.Maps.Point(0,0),
118
-
119
- roundClickableArea: true,
120
-
121
- });
122
-
123
- layer.add(pin);
124
-
125
- }
126
-
127
- },
128
-
129
- errorCallback: function (e) {
130
-
131
- console.log('取得失敗');
132
-
133
- }
134
-
135
- });
136
-
137
- }
138
-
139
- }
140
-
141
- ```
142
-
143
-
144
-
145
- 以上です。
146
118
 
147
119
  よろしくお願い致します。