回答編集履歴

9

.

2023/01/24 01:28

投稿

int32_t
int32_t

スコア20661

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

.

2023/01/24 01:14

投稿

int32_t
int32_t

スコア20661

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

別の例

2023/01/24 01:05

投稿

int32_t
int32_t

スコア20661

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

.

2023/01/24 00:54

投稿

int32_t
int32_t

スコア20661

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 d = 1000 * Math.floor(Math.random() * 5);
17
+ let finishDuration = 1000 * Math.floor(Math.random() * 5);
18
18
  document.getElementById(i[n]).animate(
19
- [{left: '0%'}, {left: '90%'}], {duration:d, fill:'forwards'});
19
+ [{left: '0%'}, {left: '90%'}], {duration:finishDuration, fill:'forwards'});
20
20
  }
21
21
  ```
22
22
 

5

.

2023/01/24 00:51

投稿

int32_t
int32_t

スコア20661

test CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- 配列 `x` の各項目が乱数秒後にセットされるので「最終的に90%」になることはめったにないでしょう。`j` が `2` のときの乱数が一番大きかったときだけ最終的に90%になります。
2
+ 配列 `x` の各項目が乱数秒後にセットされるので`j` が `2` のときの乱数が一番大きかったときだけ最終的に90%になります。
3
3
 
4
4
  やりたいことがいまいちはっきりしませんが、「乱数 * 5 秒後に90%にしたい」ということでしょうか。
5
5
  ```js

4

animate() サンプル

2023/01/24 00:50

投稿

int32_t
int32_t

スコア20661

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

改善例

2023/01/24 00:37

投稿

int32_t
int32_t

スコア20661

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

.

2023/01/24 00:33

投稿

int32_t
int32_t

スコア20661

test CHANGED
@@ -1,3 +1,4 @@
1
1
 
2
- 配列 `x` の各項目が乱数秒後にセットされるので「最終的に90%」になることはめったにないでしょう。
2
+ 配列 `x` の各項目が乱数秒後にセットされるので「最終的に90%」になることはめったにないでしょう。`j` が `2` のときの乱数が一番大きかったときだけ最終的に90%になります。
3
3
 
4
+

1

ループに関して削除

2023/01/24 00:31

投稿

int32_t
int32_t

スコア20661

test CHANGED
@@ -1,6 +1,3 @@
1
- > setTimeoutを呼び出した時点でdocument.getElementById(i[n])のi[n]の中身は呼び出し時点の配列の中身で登録されていると思う
2
1
 
3
- いいえ。`setTimeout()` に渡した関数が実行される時点で `n` や `j` 評価されるので、実行時には `for` ループは終了しており、 `n` は `i.length`、`j` は `x.length` になります
2
+ 配列 `x` の各項目乱数秒後にセットされるので「最終的90%」になることめったにないでしょう
4
3
 
5
- その問題を期待どおりの動作に直したとしても、配列 `x` の項目が乱数秒後にセットされるので「最終的に90%」になることはめったにないでしょう。
6
-