teratail
回答率
85.36%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問jQuery.Deferredと.then()を使った連続処理が実行されない

編集履歴

質問編集履歴

4

誤記を修正

2019/10/21 03:56

投稿

miyaken912
miyaken912

スコア15

test CHANGED
File without changes
test CHANGED
@@ -250,8 +250,6 @@
250
250
 
251
251
  .then(show_jankenpon.bind(null, "しょ"))
252
252
 
253
-
254
-
255
253
  .then(pc_janken)
256
254
 
257
255
  .then(judge)

3

微修正しました。

2019/10/21 03:56

投稿

miyaken912
miyaken912

スコア15

test CHANGED
File without changes
test CHANGED
@@ -244,7 +244,13 @@
244
244
 
245
245
  .then(reset)
246
246
 
247
- .then(show_jankenpon.bind(null, "あいこでしょ"))
247
+ .then(show_jankenpon.bind(null, "あい"))
248
+
249
+ .then(show_jankenpon.bind(null, "こで"))
250
+
251
+ .then(show_jankenpon.bind(null, "しょ"))
252
+
253
+
248
254
 
249
255
  .then(pc_janken)
250
256
 
@@ -314,8 +320,6 @@
314
320
 
315
321
  .then(show_jankenpon.bind(null, "ぽん"))
316
322
 
317
- .then(wait_sec.bind(null, 2))
318
-
319
323
  .then(pc_janken)
320
324
 
321
325
  .then(judge)

2

全体像が分かりにくかったようなのでHTMLも記載しました。

2019/10/21 03:54

投稿

miyaken912
miyaken912

スコア15

test CHANGED
File without changes
test CHANGED
@@ -28,6 +28,212 @@
28
28
 
29
29
  ```javascript
30
30
 
31
+ function show_jankenpon(text) {
32
+
33
+ let d = new $.Deferred();
34
+
35
+ $("#instruction")
36
+
37
+ .html(text)
38
+
39
+ .show()
40
+
41
+ .fadeOut(1000, function() {
42
+
43
+ d.resolve();
44
+
45
+ });
46
+
47
+ return d.promise();
48
+
49
+ }
50
+
51
+
52
+
53
+ $(function() {
54
+
55
+ const Gu_0 = 0;
56
+
57
+ const Cho_1 = 1;
58
+
59
+ const Par_2 = 2;
60
+
61
+ let pc_hand;
62
+
63
+ let my_hand;
64
+
65
+ let result;
66
+
67
+
68
+
69
+ function reset() {
70
+
71
+ let d = new $.Deferred();
72
+
73
+
74
+
75
+ my_hand = null;
76
+
77
+ pc_hand = null;
78
+
79
+ result = null;
80
+
81
+ $("#my_hand_id").html("");
82
+
83
+ $("#pc_hand_id").html("");
84
+
85
+ $("#instruction").html("");
86
+
87
+ $("#judgement").html("");
88
+
89
+ d.resolve();
90
+
91
+
92
+
93
+ return d.promise();
94
+
95
+ }
96
+
97
+
98
+
99
+ function pc_janken() {
100
+
101
+ let d = new $.Deferred();
102
+
103
+ pc_hand = Math.floor(Math.random() * 3);
104
+
105
+ console.log("in pc_janken pc_hand= " + pc_hand);
106
+
107
+ if (pc_hand == Gu_0) {
108
+
109
+ $("#pc_hand_id")
110
+
111
+ .html("グー")
112
+
113
+ .fadeIn(2000, d.resolve());
114
+
115
+ } else if (pc_hand == Cho_1) {
116
+
117
+ $("#pc_hand_id")
118
+
119
+ .html("チョキ")
120
+
121
+ .fadeIn(2000, d.resolve());
122
+
123
+ } else if (pc_hand == Par_2) {
124
+
125
+ $("#pc_hand_id")
126
+
127
+ .html("パー")
128
+
129
+ .fadeIn(2000, d.resolve());
130
+
131
+ }
132
+
133
+ return d.promise();
134
+
135
+ }
136
+
137
+
138
+
139
+ function judge() {
140
+
141
+ let d = new $.Deferred();
142
+
143
+ const Gu_0 = 0;
144
+
145
+ const Cho_1 = 1;
146
+
147
+ const Par_2 = 2;
148
+
149
+
150
+
151
+ if (my_hand == Gu_0 && pc_hand == Gu_0) {
152
+
153
+ result = "aiko";
154
+
155
+ }
156
+
157
+ if (my_hand == Gu_0 && pc_hand == Cho_1) {
158
+
159
+ result = "you win";
160
+
161
+ }
162
+
163
+ if (my_hand == Gu_0 && pc_hand == Par_2) {
164
+
165
+ result = "you lose";
166
+
167
+ }
168
+
169
+ if (my_hand == Cho_1 && pc_hand == Gu_0) {
170
+
171
+ result = "you lose";
172
+
173
+ }
174
+
175
+ if (my_hand == Cho_1 && pc_hand == Cho_1) {
176
+
177
+ result = "aiko";
178
+
179
+ }
180
+
181
+ if (my_hand == Cho_1 && pc_hand == Par_2) {
182
+
183
+ result = "you win";
184
+
185
+ }
186
+
187
+ if (my_hand == Par_2 && pc_hand == Gu_0) {
188
+
189
+ result = "you win";
190
+
191
+ }
192
+
193
+ if (my_hand == Par_2 && pc_hand == Cho_1) {
194
+
195
+ result = "you lose";
196
+
197
+ }
198
+
199
+ if (my_hand == Par_2 && pc_hand == Par_2) {
200
+
201
+ result = "aiko";
202
+
203
+ }
204
+
205
+ if (my_hand == null) {
206
+
207
+ result = "atodashi";
208
+
209
+ }
210
+
211
+ d.resolve();
212
+
213
+ return d.promise();
214
+
215
+ }
216
+
217
+
218
+
219
+ function show_aiko() {
220
+
221
+ let d = new $.Deferred();
222
+
223
+ $("#judgement").html("あいこです");
224
+
225
+ setTimeout(function() {
226
+
227
+ d.resolve();
228
+
229
+ }, 1000);
230
+
231
+ return d.promise();
232
+
233
+ }
234
+
235
+
236
+
31
237
  function show_result() {
32
238
 
33
239
  console.log(result);
@@ -36,7 +242,9 @@
36
242
 
37
243
  show_aiko()
38
244
 
245
+ .then(reset)
246
+
39
- .then(show_jankenpon.bind(null, "あい・こで・しょ"))
247
+ .then(show_jankenpon.bind(null, "あいこでしょ"))
40
248
 
41
249
  .then(pc_janken)
42
250
 
@@ -64,163 +272,59 @@
64
272
 
65
273
 
66
274
 
67
- function show_jankenpon(text) {
68
-
69
- let d = new $.Deferred();
70
-
71
- $("#instruction")
72
-
73
- .html(text)
74
-
75
- .show()
76
-
77
- .fadeOut(1000, function() {
78
-
79
- d.resolve();
80
-
81
- });
82
-
83
- return d.promise();
84
-
85
- }
86
-
87
-
88
-
89
- function pc_janken() {
90
-
91
- let d = new $.Deferred();
92
-
93
- pc_hand = Math.floor(Math.random() * 3);
94
-
95
- console.log("in pc_janken pc_hand= " + pc_hand);
96
-
97
- if (pc_hand == Gu_0) {
98
-
99
- $("#pc_hand_id")
100
-
101
- .html("グー")
102
-
103
- .fadeIn(2000, d.resolve());
104
-
105
- } else if (pc_hand == Cho_1) {
106
-
107
- $("#pc_hand_id")
108
-
109
- .html("チョキ")
110
-
111
- .fadeIn(2000, d.resolve());
112
-
113
- } else if (pc_hand == Par_2) {
114
-
115
- $("#pc_hand_id")
116
-
117
- .html("パー")
118
-
119
- .fadeIn(2000, d.resolve());
120
-
121
- }
122
-
123
- return d.promise();
124
-
125
- }
126
-
127
-
128
-
129
- function judge() {
130
-
131
- let d = new $.Deferred();
132
-
133
- const Gu_0 = 0;
134
-
135
- const Cho_1 = 1;
136
-
137
- const Par_2 = 2;
138
-
139
-
140
-
141
- if (my_hand == Gu_0 && pc_hand == Gu_0) {
142
-
143
- result = "aiko";
144
-
145
- }
146
-
147
- if (my_hand == Gu_0 && pc_hand == Cho_1) {
148
-
149
- result = "you win";
150
-
151
- }
152
-
153
- if (my_hand == Gu_0 && pc_hand == Par_2) {
154
-
155
- result = "you lose";
156
-
157
- }
158
-
159
- if (my_hand == Cho_1 && pc_hand == Gu_0) {
160
-
161
- result = "you lose";
162
-
163
- }
164
-
165
- if (my_hand == Cho_1 && pc_hand == Cho_1) {
166
-
167
- result = "aiko";
168
-
169
- }
170
-
171
- if (my_hand == Cho_1 && pc_hand == Par_2) {
172
-
173
- result = "you win";
174
-
175
- }
176
-
177
- if (my_hand == Par_2 && pc_hand == Gu_0) {
178
-
179
- result = "you win";
180
-
181
- }
182
-
183
- if (my_hand == Par_2 && pc_hand == Cho_1) {
184
-
185
- result = "you lose";
186
-
187
- }
188
-
189
- if (my_hand == Par_2 && pc_hand == Par_2) {
190
-
191
- result = "aiko";
192
-
193
- }
194
-
195
- if (my_hand == null) {
196
-
197
- result = "atodashi";
198
-
199
- }
200
-
201
- d.resolve();
202
-
203
- return d.promise();
204
-
205
- }
206
-
207
-
208
-
209
- function show_aiko() {
210
-
211
- let d = new $.Deferred();
212
-
213
- $("#judgement").html("あいこです");
214
-
215
- setTimeout(function() {
216
-
217
- d.resolve();
218
-
219
- }, 1000);
220
-
221
- return d.promise();
222
-
223
- }
275
+ $("#gu_btn").on("click", function() {
276
+
277
+ my_hand = Gu_0;
278
+
279
+ $("#my_hand_id").html("グー");
280
+
281
+ console.log("Gu clicked");
282
+
283
+ });
284
+
285
+ $("#cho_btn").on("click", function() {
286
+
287
+ my_hand = Cho_1;
288
+
289
+ $("#my_hand_id").html("チョキ");
290
+
291
+ console.log("Cho clicked");
292
+
293
+ });
294
+
295
+ $("#par_btn").on("click", function() {
296
+
297
+ my_hand = Par_2;
298
+
299
+ $("#my_hand_id").html("パー");
300
+
301
+ console.log("Par clicked");
302
+
303
+ });
304
+
305
+
306
+
307
+ $("#start").on("click", function() {
308
+
309
+ reset()
310
+
311
+ .then(show_jankenpon.bind(null, "じゃん"))
312
+
313
+ .then(show_jankenpon.bind(null, "けん"))
314
+
315
+ .then(show_jankenpon.bind(null, "ぽん"))
316
+
317
+ .then(wait_sec.bind(null, 2))
318
+
319
+ .then(pc_janken)
320
+
321
+ .then(judge)
322
+
323
+ .then(show_result);
324
+
325
+ });
326
+
327
+ });
224
328
 
225
329
 
226
330
 
@@ -228,6 +332,98 @@
228
332
 
229
333
 
230
334
 
335
+ ```HTML
336
+
337
+
338
+
339
+ <!DOCTYPE html>
340
+
341
+ <html>
342
+
343
+ <head>
344
+
345
+ <meta charset="utf-8" />
346
+
347
+ <meta name="viewport" content="width=device-width" />
348
+
349
+ <script src="js/jquery-2.1.3.min.js"></script>
350
+
351
+ <link rel="stylesheet" href="css/sample.css" />
352
+
353
+ <title>じゃんけん</title>
354
+
355
+ </head>
356
+
357
+ <body>
358
+
359
+ <header>
360
+
361
+ <h1>じゃんけんゲーム</h1>
362
+
363
+ <button id="start">START</button>
364
+
365
+ <br />
366
+
367
+ <br />
368
+
369
+ </header>
370
+
371
+
372
+
373
+ <main>
374
+
375
+ <div id="instruction"></div>
376
+
377
+ <br />
378
+
379
+ <div id="hands">
380
+
381
+ <div>あなた 「<span id="my_hand_id"></span>」</div>
382
+
383
+ <div>コンピュータ 「<span id="pc_hand_id"></span>」</div>
384
+
385
+ </div>
386
+
387
+ <br />
388
+
389
+ <div id="judgement"></div>
390
+
391
+ </main>
392
+
393
+
394
+
395
+ <div id="controller">
396
+
397
+ <ul>
398
+
399
+ <li id="gu_btn">グー</li>
400
+
401
+ <li id="cho_btn">チョキ</li>
402
+
403
+ <li id="par_btn">パー</li>
404
+
405
+ </ul>
406
+
407
+ <button id="onsei_btn">音声入力</button>
408
+
409
+ </div>
410
+
411
+
412
+
413
+ <footer></footer>
414
+
415
+ <script src="js/main.js"></script>
416
+
417
+ </body>
418
+
419
+ </html>
420
+
421
+
422
+
423
+ ```
424
+
425
+
426
+
231
427
  ### 試したこと
232
428
 
233
429
 

1

ソースコードの順番を分かりやすいよう修正

2019/10/21 03:51

投稿

miyaken912
miyaken912

スコア15

test CHANGED
File without changes
test CHANGED
@@ -28,6 +28,42 @@
28
28
 
29
29
  ```javascript
30
30
 
31
+ function show_result() {
32
+
33
+ console.log(result);
34
+
35
+ while (result == "aiko") {
36
+
37
+ show_aiko()
38
+
39
+ .then(show_jankenpon.bind(null, "あい・こで・しょ"))
40
+
41
+ .then(pc_janken)
42
+
43
+ .then(judge)
44
+
45
+ }
46
+
47
+
48
+
49
+ if (result == "you win") {
50
+
51
+ $("#judgement").html("あなたの勝ちです");
52
+
53
+ } else if (result == "you lose") {
54
+
55
+ $("#judgement").html("あなたの負けです");
56
+
57
+ } else if (result == "atodashi") {
58
+
59
+ $("#judgement").html("後出しであなたの負けです");
60
+
61
+ }
62
+
63
+ }
64
+
65
+
66
+
31
67
  function show_jankenpon(text) {
32
68
 
33
69
  let d = new $.Deferred();
@@ -188,40 +224,6 @@
188
224
 
189
225
 
190
226
 
191
- function show_result() {
192
-
193
- console.log(result);
194
-
195
- while (result == "aiko") {
196
-
197
- show_aiko()
198
-
199
- .then(show_jankenpon.bind(null, "あい・こで・しょ"))
200
-
201
- .then(pc_janken)
202
-
203
- .then(judge)
204
-
205
- }
206
-
207
-
208
-
209
- if (result == "you win") {
210
-
211
- $("#judgement").html("あなたの勝ちです");
212
-
213
- } else if (result == "you lose") {
214
-
215
- $("#judgement").html("あなたの負けです");
216
-
217
- } else if (result == "atodashi") {
218
-
219
- $("#judgement").html("後出しであなたの負けです");
220
-
221
- }
222
-
223
- }
224
-
225
227
  ```
226
228
 
227
229