teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問jQuery setTimeoutの使い方がいまいち理解できません。良い改善方法を知りたいです。

編集履歴

質問編集履歴

2

題名の変更

2019/03/01 09:31

投稿

kira-kira
kira-kira

スコア30

test CHANGED
@@ -1 +1 @@
1
- jQuery PromiseおよびsetTimeoutの使い方がいまいち理解できません。良い改善方法を知りたいです。
1
+ jQuery setTimeoutの使い方がいまいち理解できません。良い改善方法を知りたいです。
test CHANGED
File without changes

1

コードの名前

2019/03/01 09:31

投稿

kira-kira
kira-kira

スコア30

test CHANGED
File without changes
test CHANGED
@@ -22,11 +22,9 @@
22
22
 
23
23
  現時点ではエラーが出ていませんが、時間差の設定を１つ変えるとそのほかの時間設定も全て変えなくてはならないです。1500ms、3000ms、4500msで処理するのでははなく、1500msで処理したら次、1500msで処理したら次
24
24
 
25
- 、1500msで処理するという風にもっと効率よく書く方法はありますでしょうか？お願い致します。```
25
+ 、1500msで処理するという風にもっと効率よく書く方法はありますでしょうか？お願い致します。
26
-
26
+
27
- html
27
+ ```html
28
-
29
- コード
30
28
 
31
29
  ```<!DOCTYPE html>
32
30
 
@@ -72,190 +70,186 @@
72
70
 
73
71
 
74
72
 
73
+ ```
74
+
75
75
  ```css
76
76
 
77
+ body {
78
+
79
+ display: flex;
80
+
81
+ flex-wrap: wrap;
82
+
83
+ }
84
+
77
- コード
85
+ #red,
86
+
87
+ #yellow,
88
+
89
+ #green {
90
+
91
+ width: 200px;
92
+
93
+ height: 200px;
94
+
95
+ background: grey;
96
+
97
+ line-height: 200px;
98
+
99
+ user-select: none;
100
+
101
+ float: left;
102
+
103
+ margin: 10px;
104
+
105
+ }
106
+
107
+
108
+
109
+ #btn {
110
+
111
+ width: 150px;
112
+
113
+ height: 150px;
114
+
115
+ line-height: 150px;
116
+
117
+ text-align: center;
118
+
119
+ font-weight: bold;
120
+
121
+ border-radius: 50%;
122
+
123
+ background: red;
124
+
125
+ color: white;
126
+
127
+ cursor: pointer;
128
+
129
+ margin: 250px auto 0;
130
+
131
+ user-select: none;
132
+
133
+ }
134
+
135
+
136
+
137
+ #reload {
138
+
139
+ font-size: 18px;
140
+
141
+ font-weight: bold;
142
+
143
+ width: 150px;
144
+
145
+ height: 150px;
146
+
147
+ background: black;
148
+
149
+ border-radius: 50%;
150
+
151
+ text-align: center;
152
+
153
+ line-height: 150px;
154
+
155
+ margin: 250px auto 0;
156
+
157
+ color: red;
158
+
159
+ cursor: pointer;
160
+
161
+ user-select: none;
162
+
163
+ }
164
+
165
+
78
166
 
79
167
  ```
80
168
 
81
- body {
82
-
83
- display: flex;
84
-
85
- flex-wrap: wrap;
86
-
87
- }
88
-
89
- #red,
90
-
91
- #yellow,
92
-
93
- #green {
94
-
95
- width: 200px;
96
-
97
- height: 200px;
98
-
99
- background: grey;
100
-
101
- line-height: 200px;
102
-
103
- user-select: none;
104
-
105
- float: left;
106
-
107
- margin: 10px;
108
-
109
- }
110
-
111
-
112
-
113
- #btn {
114
-
115
- width: 150px;
116
-
117
- height: 150px;
118
-
119
- line-height: 150px;
120
-
121
- text-align: center;
122
-
123
- font-weight: bold;
124
-
125
- border-radius: 50%;
126
-
127
- background: red;
128
-
129
- color: white;
130
-
131
- cursor: pointer;
132
-
133
- margin: 250px auto 0;
134
-
135
- user-select: none;
136
-
137
- }
138
-
139
-
140
-
141
- #reload {
142
-
143
- font-size: 18px;
144
-
145
- font-weight: bold;
146
-
147
- width: 150px;
148
-
149
- height: 150px;
150
-
151
- background: black;
152
-
153
- border-radius: 50%;
154
-
155
- text-align: center;
156
-
157
- line-height: 150px;
158
-
159
- margin: 250px auto 0;
160
-
161
- color: red;
162
-
163
- cursor: pointer;
164
-
165
- user-select: none;
166
-
167
- }
169
+ ```javascript
170
+
171
+ $(function(){
172
+
173
+ const myDefer = $.Deferred();
174
+
175
+
176
+
177
+ $('#btn').click(function(){
178
+
179
+ myDefer.resolve();
180
+
181
+ });
182
+
183
+ $('#btn').dblclick(function(){
184
+
185
+ myDefer.reject();
186
+
187
+ });
188
+
189
+
190
+
191
+ const myPromise = myDefer.promise();
192
+
193
+
194
+
195
+ myPromise.then(
196
+
197
+ function(){
198
+
199
+ $('#red').css('background', 'red');
200
+
201
+ }
202
+
203
+ ).then(
204
+
205
+ function(){
206
+
207
+ setTimeout(function(){
208
+
209
+ $('#yellow').css('background', '#FFFF00');
210
+
211
+ $('#red').css('background', '');
212
+
213
+ },1500);
214
+
215
+ }
216
+
217
+ ).then(
218
+
219
+ function(){
220
+
221
+ setTimeout(function(){
222
+
223
+ $('#green').css('background', 'green');
224
+
225
+ $('#yellow').css('background', '');
226
+
227
+ },3000);
228
+
229
+ }
230
+
231
+ ).then(
232
+
233
+ function(){
234
+
235
+ setTimeout(function(){
236
+
237
+ $('#green').css('background', '');
238
+
239
+ },4500);
240
+
241
+ }
242
+
243
+ );
244
+
245
+ $('#reload').click(function() {
246
+
247
+ location.reload();
248
+
249
+ });
250
+
251
+ });
168
252
 
169
253
 
170
254
 
171
255
  ```
172
-
173
- jquery
174
-
175
- ```
176
-
177
- $(function(){
178
-
179
- const myDefer = $.Deferred();
180
-
181
-
182
-
183
- $('#btn').click(function(){
184
-
185
- myDefer.resolve();
186
-
187
- });
188
-
189
- $('#btn').dblclick(function(){
190
-
191
- myDefer.reject();
192
-
193
- });
194
-
195
-
196
-
197
- const myPromise = myDefer.promise();
198
-
199
-
200
-
201
- myPromise.then(
202
-
203
- function(){
204
-
205
- $('#red').css('background', 'red');
206
-
207
- }
208
-
209
- ).then(
210
-
211
- function(){
212
-
213
- setTimeout(function(){
214
-
215
- $('#yellow').css('background', '#FFFF00');
216
-
217
- $('#red').css('background', '');
218
-
219
- },1500);
220
-
221
- }
222
-
223
- ).then(
224
-
225
- function(){
226
-
227
- setTimeout(function(){
228
-
229
- $('#green').css('background', 'green');
230
-
231
- $('#yellow').css('background', '');
232
-
233
- },3000);
234
-
235
- }
236
-
237
- ).then(
238
-
239
- function(){
240
-
241
- setTimeout(function(){
242
-
243
- $('#green').css('background', '');
244
-
245
- },4500);
246
-
247
- }
248
-
249
- );
250
-
251
- $('#reload').click(function() {
252
-
253
- location.reload();
254
-
255
- });
256
-
257
- });
258
-
259
-
260
-
261
- ```