回答編集履歴
9
.
test
CHANGED
@@ -31,4 +31,16 @@
|
|
31
31
|
}
|
32
32
|
}
|
33
33
|
```
|
34
|
+
3つの要素も(並列ではなく)順番に動かしたいなら:
|
35
|
+
```js
|
36
|
+
let duration = 0;
|
37
|
+
for (let n = 0; n < i.length; n++) {
|
38
|
+
for (let j = 0; j < x.length; j++) {
|
39
|
+
duration += 1000 * Math.floor(Math.random() * 5);
|
40
|
+
setTimeout(function(){
|
41
|
+
document.getElementById(i[n]).style.left = x[j] + "%";
|
42
|
+
}, duration);
|
43
|
+
}
|
44
|
+
}
|
45
|
+
```
|
34
46
|
|
8
.
test
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
|
2
|
-
配列 `x` の各項目が乱数秒後にセットされるので、`j` が `2` のときの乱数が一番大きかったときだけ最終的に90%になります。
|
2
|
+
配列 `x` の各項目が順番に関係なく乱数秒後に`left`プロパティにセットされるので、`j` が `2` のときの乱数が一番大きかったときだけ最終的に90%になります。`setTimeout()`は予約をするだけで即座に返ってくることがポイントです。
|
3
3
|
|
4
4
|
やりたいことがいまいちはっきりしませんが、「乱数 * 5 秒後に90%にしたい」ということでしょうか。
|
5
5
|
```js
|
7
別の例
test
CHANGED
@@ -3,7 +3,7 @@
|
|
3
3
|
|
4
4
|
やりたいことがいまいちはっきりしませんが、「乱数 * 5 秒後に90%にしたい」ということでしょうか。
|
5
5
|
```js
|
6
|
-
for(let n = 0; n < i.length; n++) {
|
6
|
+
for (let n = 0; n < i.length; n++) {
|
7
7
|
let finishDuration = 1000*Math.floor(Math.random() * 5);
|
8
8
|
for (let j = 0; j < x.length; j++) {
|
9
9
|
setTimeout(function(){
|
@@ -19,4 +19,16 @@
|
|
19
19
|
[{left: '0%'}, {left: '90%'}], {duration:finishDuration, fill:'forwards'});
|
20
20
|
}
|
21
21
|
```
|
22
|
+
「乱数 * 5 秒後に10%、その乱数 * 5 秒後に50%、その乱数 * 5 秒後に90%」であれば:
|
23
|
+
```js
|
24
|
+
for (let n = 0; n < i.length; n++) {
|
25
|
+
let duration = 0;
|
26
|
+
for (let j = 0; j < x.length; j++) {
|
27
|
+
duration += 1000 * Math.floor(Math.random() * 5);
|
28
|
+
setTimeout(function(){
|
29
|
+
document.getElementById(i[n]).style.left = x[j] + "%";
|
30
|
+
}, duration);
|
31
|
+
}
|
32
|
+
}
|
33
|
+
```
|
22
34
|
|
6
.
test
CHANGED
@@ -3,9 +3,9 @@
|
|
3
3
|
|
4
4
|
やりたいことがいまいちはっきりしませんが、「乱数 * 5 秒後に90%にしたい」ということでしょうか。
|
5
5
|
```js
|
6
|
-
for(let n=0; n < i.length; n++) {
|
6
|
+
for(let n = 0; n < i.length; n++) {
|
7
7
|
let finishDuration = 1000*Math.floor(Math.random() * 5);
|
8
|
-
for (let j=0; j < x.length; j++) {
|
8
|
+
for (let j = 0; j < x.length; j++) {
|
9
9
|
setTimeout(function(){
|
10
10
|
document.getElementById(i[n]).style.left = x[j] + "%";
|
11
11
|
}, finishDuration * (j + 1) / x.length);
|
@@ -14,9 +14,9 @@
|
|
14
14
|
```
|
15
15
|
```js
|
16
16
|
for (let n = 0; n < i.length; n++) {
|
17
|
-
let
|
17
|
+
let finishDuration = 1000 * Math.floor(Math.random() * 5);
|
18
18
|
document.getElementById(i[n]).animate(
|
19
|
-
[{left: '0%'}, {left: '90%'}], {duration:
|
19
|
+
[{left: '0%'}, {left: '90%'}], {duration:finishDuration, fill:'forwards'});
|
20
20
|
}
|
21
21
|
```
|
22
22
|
|
5
.
test
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
|
2
|
-
配列 `x` の各項目が乱数秒後にセットされるので
|
2
|
+
配列 `x` の各項目が乱数秒後にセットされるので、`j` が `2` のときの乱数が一番大きかったときだけ最終的に90%になります。
|
3
3
|
|
4
4
|
やりたいことがいまいちはっきりしませんが、「乱数 * 5 秒後に90%にしたい」ということでしょうか。
|
5
5
|
```js
|
4
animate() サンプル
test
CHANGED
@@ -12,4 +12,11 @@
|
|
12
12
|
}
|
13
13
|
}
|
14
14
|
```
|
15
|
+
```js
|
16
|
+
for (let n = 0; n < i.length; n++) {
|
17
|
+
let d = 1000 * Math.floor(Math.random() * 5);
|
18
|
+
document.getElementById(i[n]).animate(
|
19
|
+
[{left: '0%'}, {left: '90%'}], {duration:d, fill:'forwards'});
|
20
|
+
}
|
21
|
+
```
|
15
22
|
|
3
改善例
test
CHANGED
@@ -1,4 +1,15 @@
|
|
1
1
|
|
2
2
|
配列 `x` の各項目が乱数秒後にセットされるので「最終的に90%」になることはめったにないでしょう。`j` が `2` のときの乱数が一番大きかったときだけ最終的に90%になります。
|
3
3
|
|
4
|
+
やりたいことがいまいちはっきりしませんが、「乱数 * 5 秒後に90%にしたい」ということでしょうか。
|
5
|
+
```js
|
6
|
+
for(let n=0; n < i.length; n++) {
|
7
|
+
let finishDuration = 1000*Math.floor(Math.random() * 5);
|
8
|
+
for (let j=0; j < x.length; j++) {
|
9
|
+
setTimeout(function(){
|
10
|
+
document.getElementById(i[n]).style.left = x[j] + "%";
|
11
|
+
}, finishDuration * (j + 1) / x.length);
|
12
|
+
}
|
13
|
+
}
|
14
|
+
```
|
4
15
|
|
2
.
test
CHANGED
@@ -1,3 +1,4 @@
|
|
1
1
|
|
2
|
-
配列 `x` の各項目が乱数秒後にセットされるので「最終的に90%」になることはめったにないでしょう。
|
2
|
+
配列 `x` の各項目が乱数秒後にセットされるので「最終的に90%」になることはめったにないでしょう。`j` が `2` のときの乱数が一番大きかったときだけ最終的に90%になります。
|
3
3
|
|
4
|
+
|
1
ループに関して削除
test
CHANGED
@@ -1,6 +1,3 @@
|
|
1
|
-
> setTimeoutを呼び出した時点でdocument.getElementById(i[n])のi[n]の中身は呼び出し時点の配列の中身で登録されていると思う
|
2
1
|
|
3
|
-
|
2
|
+
配列 `x` の各項目が乱数秒後にセットされるので「最終的に90%」になることはめったにないでしょう。
|
4
3
|
|
5
|
-
その問題を期待どおりの動作に直したとしても、配列 `x` の項目が乱数秒後にセットされるので「最終的に90%」になることはめったにないでしょう。
|
6
|
-
|