teratail
回答率
85.47%
質問するログイン新規登録
トップHTML5に関する質問jsでalertを入れないと動かないです...

編集履歴

回答編集履歴

2

ｔｙぽ

2018/02/05 08:03

投稿

yambejp
yambejp

スコア114883

test CHANGED
@@ -94,8 +94,6 @@
94
94
 
95
95
  $.ajax({url:"get.php?sleep=5"}).done(function(data){$("#d3").text(data);d.resolve();})
96
96
 
97
-
98
-
99
97
  ).done(function(){
100
98
 
101
99
  $("#end").text("end");
@@ -122,6 +120,46 @@
122
120
 
123
121
  var d3 = $.Deferred();
124
122
 
123
+ $("#d1").load("get.php?sleep=3",function(){d1.resolve()});
124
+
125
+ $("#d2").load("get.php?sleep=1",function(){d2.resolve()});
126
+
127
+ $("#d3").load("get.php?sleep=5",function(){d3.resolve()});
128
+
129
+ $.when(
130
+
131
+ d1,d2,d3
132
+
133
+ ).done(function(){
134
+
135
+ $("#end").text("end");
136
+
137
+ });
138
+
139
+ });
140
+
141
+
142
+
143
+ ```
144
+
145
+
146
+
147
+ ## パターン3(deferredをwhen + promise)
148
+
149
+
150
+
151
+ ```javascript
152
+
153
+ $(function(){
154
+
155
+ $("#start").text("start");
156
+
157
+ var d1 = $.Deferred();
158
+
159
+ var d2 = $.Deferred();
160
+
161
+ var d3 = $.Deferred();
162
+
125
163
  $.when(
126
164
 
127
165
  $("#d1").load("get.php?sleep=3",function(){d1.resolve()}),d1.promise(),
@@ -142,44 +180,6 @@
142
180
 
143
181
 
144
182
 
145
- ## パターン3(deferredをwhen + promise)
146
-
147
-
148
-
149
- ```javascript
150
-
151
- $(function(){
152
-
153
- $("#start").text("start");
154
-
155
- var d1 = $.Deferred();
156
-
157
- var d2 = $.Deferred();
158
-
159
- var d3 = $.Deferred();
160
-
161
- $("#d1").load("get.php?sleep=3",function(){d1.resolve()});
162
-
163
- $("#d2").load("get.php?sleep=1",function(){d2.resolve()});
164
-
165
- $("#d3").load("get.php?sleep=5",function(){d3.resolve()});
166
-
167
- $.when(
168
-
169
- d1,d2,d3
170
-
171
- ).done(function(){
172
-
173
- $("#end").text("end");
174
-
175
- });
176
-
177
- });
178
-
179
- ```
180
-
181
-
182
-
183
183
  ## パターン4(promiseを利用)
184
184
 
185
185
 

1

参考

2018/02/05 08:03

投稿

yambejp
yambejp

スコア114883

test CHANGED
@@ -29,3 +29,191 @@
29
29
 
30
30
 
31
31
  ```
32
+
33
+
34
+
35
+ # 参考までに
36
+
37
+ 以下、sampleで試してみて下さい
38
+
39
+ - self.htm
40
+
41
+ ```HTML
42
+
43
+ <div id="start"></div>
44
+
45
+ <div id="d1"></div>
46
+
47
+ <div id="d2"></div>
48
+
49
+ <div id="d3"></div>
50
+
51
+ <div id="end"></div>
52
+
53
+ ```
54
+
55
+ - get.php
56
+
57
+ パラメータsleepで指定した秒数後に、その値を表示する
58
+
59
+
60
+
61
+ ```PHP
62
+
63
+ <?PHP
64
+
65
+ $sleep=filter_input(INPUT_GET,"sleep");
66
+
67
+ sleep($sleep);
68
+
69
+ print $sleep;
70
+
71
+ ?>
72
+
73
+ ```
74
+
75
+
76
+
77
+ ## パターン1($.ajax)
78
+
79
+
80
+
81
+ ```javascript
82
+
83
+ $(function(){
84
+
85
+ $("#start").text("start");
86
+
87
+ var d = $.Deferred();
88
+
89
+ $.when(
90
+
91
+ $.ajax({url:"get.php?sleep=3"}).done(function(data){$("#d1").text(data);d.resolve();}),
92
+
93
+ $.ajax({url:"get.php?sleep=1"}).done(function(data){$("#d2").text(data);d.resolve();}),
94
+
95
+ $.ajax({url:"get.php?sleep=5"}).done(function(data){$("#d3").text(data);d.resolve();})
96
+
97
+
98
+
99
+ ).done(function(){
100
+
101
+ $("#end").text("end");
102
+
103
+ });
104
+
105
+ });
106
+
107
+ ```
108
+
109
+ ## パターン2(deferredをwhen)
110
+
111
+
112
+
113
+ ```javascript
114
+
115
+ $(function(){
116
+
117
+ $("#start").text("start");
118
+
119
+ var d1 = $.Deferred();
120
+
121
+ var d2 = $.Deferred();
122
+
123
+ var d3 = $.Deferred();
124
+
125
+ $.when(
126
+
127
+ $("#d1").load("get.php?sleep=3",function(){d1.resolve()}),d1.promise(),
128
+
129
+ $("#d2").load("get.php?sleep=1",function(){d2.resolve()}),d2.promise(),
130
+
131
+ $("#d3").load("get.php?sleep=5",function(){d3.resolve()}),d3.promise()
132
+
133
+ ).done(function(){
134
+
135
+ $("#end").text("end");
136
+
137
+ });
138
+
139
+ });
140
+
141
+ ```
142
+
143
+
144
+
145
+ ## パターン3(deferredをwhen + promise)
146
+
147
+
148
+
149
+ ```javascript
150
+
151
+ $(function(){
152
+
153
+ $("#start").text("start");
154
+
155
+ var d1 = $.Deferred();
156
+
157
+ var d2 = $.Deferred();
158
+
159
+ var d3 = $.Deferred();
160
+
161
+ $("#d1").load("get.php?sleep=3",function(){d1.resolve()});
162
+
163
+ $("#d2").load("get.php?sleep=1",function(){d2.resolve()});
164
+
165
+ $("#d3").load("get.php?sleep=5",function(){d3.resolve()});
166
+
167
+ $.when(
168
+
169
+ d1,d2,d3
170
+
171
+ ).done(function(){
172
+
173
+ $("#end").text("end");
174
+
175
+ });
176
+
177
+ });
178
+
179
+ ```
180
+
181
+
182
+
183
+ ## パターン4(promiseを利用)
184
+
185
+
186
+
187
+ ※jQueryの他に、非対応ブラウザ（とくにIE）向けにライブラリを追加
188
+
189
+ ```javascript
190
+
191
+ <script src="https://www.promisejs.org/polyfills/promise-6.1.0.min.js"></script>
192
+
193
+ ```
194
+
195
+ その上で
196
+
197
+ ```javascript
198
+
199
+ $(function(){
200
+
201
+ $("#start").text("start");
202
+
203
+ Promise.all([
204
+
205
+ new Promise(function(resolve){$("#d1").load("get.php?sleep=3",function(){resolve(this);})}),
206
+
207
+ new Promise(function(resolve){$("#d2").load("get.php?sleep=1",function(){resolve(this);})}),
208
+
209
+ new Promise(function(resolve){$("#d3").load("get.php?sleep=5",function(){resolve(this);})}),
210
+
211
+ ]).then(function(){
212
+
213
+ $("#end").text("end");
214
+
215
+ });
216
+
217
+ });
218
+
219
+ ```