teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問setIntervalを使用して文字をスムーズに横へ移動させたい

編集履歴

質問編集履歴

5

文法修正、リンク先修正

2021/07/27 11:17

投稿

hiiro46
hiiro46

スコア21

test CHANGED
File without changes
test CHANGED
@@ -146,7 +146,65 @@
146
146
 
147
147
  ```ここに言語を入力
148
148
 
149
- //infoEvent分岐
149
+ //停止event定義
150
+
151
+ function pausedMusic() {
152
+
153
+ if(musicimg.classList.contains("roseReset")){
154
+
155
+ musicimg.classList.remove("roseReset");
156
+
157
+ }
158
+
159
+ player_box.classList.remove("paused");
160
+
161
+ information.classList.remove("leftActive","rightActive");
162
+
163
+ 　　infoJudge();
164
+
165
+ playicon.setAttribute("class","fas fa-play");
166
+
167
+ musicimg.classList.remove("rote");
168
+
169
+ musicimg.classList.add("rosestop");
170
+
171
+ mainaudio.pause();
172
+
173
+ };
174
+
175
+ ```
176
+
177
+ ```ここに言語を入力
178
+
179
+ //再生event定義
180
+
181
+ function playMusic() {
182
+
183
+ if(musicimg.classList.contains("roseReset")){
184
+
185
+ musicimg.classList.remove("roseReset");
186
+
187
+ }
188
+
189
+ player_box.classList.add("paused");
190
+
191
+ information.classList.add("leftActive");
192
+
193
+ infoJudge();
194
+
195
+ playicon.setAttribute("class","fas fa-pause");
196
+
197
+ musicimg.classList.remove("rosestop");
198
+
199
+ musicimg.classList.add("rote");
200
+
201
+ mainaudio.play();
202
+
203
+ };
204
+
205
+ ```
206
+
207
+ ```ここに言語を入力
150
208
 
151
209
  const infoJudge = () => {
152
210
 

4

文法修正

2021/07/27 11:17

投稿

hiiro46
hiiro46

スコア21

test CHANGED
File without changes
test CHANGED
@@ -38,8 +38,6 @@
38
38
 
39
39
  information.classList.remove("leftActive","rightActive");
40
40
 
41
- infoJudge();
42
-
43
41
  playicon.setAttribute("class","fas fa-play");
44
42
 
45
43
  musicimg.classList.remove("rote");
@@ -68,7 +66,7 @@
68
66
 
69
67
  information.classList.add("leftActive");
70
68
 
71
- infoJudge();
69
+ infoStart();
72
70
 
73
71
  playicon.setAttribute("class","fas fa-pause");
74
72
 
@@ -86,19 +84,13 @@
86
84
 
87
85
  ```ここに言語を入力
88
86
 
89
- //infoEvent分岐
90
-
91
- const infoJudge = () => {
87
+ const infoStart = () => {
92
88
 
93
89
  let stop = setInterval(function () {
94
90
 
95
91
  if(player_box.classList.contains("paused")){
96
92
 
97
93
  infoEvent();
98
-
99
- }else{
100
-
101
- clearInterval(stop);
102
94
 
103
95
  }
104
96
 
@@ -180,7 +172,7 @@
180
172
 
181
173
  pausedが無い場合は動作キャンセル。
182
174
 
183
- 再度、再生ボタンを押すことで infoEvent()続行。
175
+ 再度、再生ボタンを押すことでinfoEvent()続行。
184
176
 
185
177
  最初に再生ボタンを押したときのように横へスムーズに移動すると考えていた。
186
178
 

3

文章修正

2021/07/27 11:12

投稿

hiiro46
hiiro46

スコア21

test CHANGED
File without changes
test CHANGED
@@ -142,17 +142,49 @@
142
142
 
143
143
 
144
144
 
145
- 再生ボタンを押すことで文字が繰り返し横へ移動します。
145
+ 再生ボタンを押すことで文字がスムーズに繰り返し横へ移動します。
146
146
 
147
- そして停止ボタンを押すと文字が止まってclearIntervalで動作をキャンセル。
148
-
149
- もう一度再生ボタンを押すことでinfoEvent()が実装。
147
+ もう一度再生ボタンを押すことでinfoEvent()実装。
150
-
151
- スムーズに横へ繰り返し移動すると考えていました。
152
148
 
153
149
  しかし実際はスムーズに横へ進まない。
154
150
 
155
151
 
152
+
153
+ ### 試したこと
154
+
155
+ ```ここに言語を入力
156
+
157
+ //infoEvent分岐
158
+
159
+ const infoJudge = () => {
160
+
161
+ let stop = setInterval(function () {
162
+
163
+ if(player_box.classList.contains("paused")){
164
+
165
+ infoEvent();
166
+
167
+ }else{
168
+
169
+ clearInterval(stop);
170
+
171
+ }
172
+
173
+ },5000);
174
+
175
+ }
176
+
177
+ ```
178
+
179
+ 僕の解釈ではpausedがある間はinfoEvent()続行。
180
+
181
+ pausedが無い場合は動作キャンセル。
182
+
183
+ 再度、再生ボタンを押すことで infoEvent()続行。
184
+
185
+ 最初に再生ボタンを押したときのように横へスムーズに移動すると考えていた。
186
+
187
+ しかし実際は文字が戻ったりして横へスムーズに進まない。
156
188
 
157
189
 
158
190
 
@@ -161,3 +193,7 @@
161
193
  ・playbtnを何回押してもスムーズに文字を横へ移動させたい
162
194
 
163
195
  ・setInterval以外で"文字をスムーズに横へ繰り返し移動する方法"があるのか知りたい
196
+
197
+
198
+
199
+ 何卒よろしくお願いします。

2

文章の修正

2021/07/27 10:47

投稿

hiiro46
hiiro46

スコア21

test CHANGED
@@ -1 +1 @@
1
- setIntervalを使用してclickイベントをスムーズに実装したい
1
+ setIntervalを使用して文字をスムーズに横へ移動させたい
test CHANGED
@@ -142,14 +142,22 @@
142
142
 
143
143
 
144
144
 
145
+ 再生ボタンを押すことで文字が繰り返し横へ移動します。
146
+
147
+ そして停止ボタンを押すと文字が止まってclearIntervalで動作をキャンセル。
148
+
149
+ もう一度再生ボタンを押すことでinfoEvent()が実装。
150
+
151
+ スムーズに横へ繰り返し移動すると考えていました。
152
+
153
+ しかし実際はスムーズに横へ進まない。
145
154
 
146
155
 
147
- clearIntervalを使用することでタイマーが止まり、停止ボタンを押すことで文字も停止できました。
148
-
149
- しかし再度ボタンを押すとスムーズに横へ移動できません。
150
156
 
151
157
 
152
158
 
153
159
  ### 解決したいこと
154
160
 
155
161
  ・playbtnを何回押してもスムーズに文字を横へ移動させたい
162
+
163
+ ・setInterval以外で"文字をスムーズに横へ繰り返し移動する方法"があるのか知りたい

1

文章修正

2021/07/27 10:42

投稿

hiiro46
hiiro46

スコア21

test CHANGED
File without changes
test CHANGED
@@ -153,9 +153,3 @@
153
153
  ### 解決したいこと
154
154
 
155
155
  ・playbtnを何回押してもスムーズに文字を横へ移動させたい
156
-
157
- ・MDNでは「setInterval を使用して設定された繰り返し動作をキャンセルします」と書いています。
158
-
159
- 解釈としては秒数がキャンセルして途中で止まるのか、秒数自体がキャンセルして0秒にリセットするのかどちらになりますか。
160
-
161
- 例：2秒で止めると再開は2秒 or 0秒？