teratail
回答率
85.30%
質問するログイン新規登録
トップJavaScriptに関する質問JavaScript Array.fromを使う事を条件でsleepを実現したい

編集履歴

回答編集履歴

10

ソース修正

2021/09/11 19:04

投稿

退会済みユーザー
answer CHANGED
@@ -95,9 +95,9 @@
95
95
  </body>
96
96
  </html>
97
97
  ```
98
- 上のコード、コピペしてブラウザに表示すればいちおう期待されてる動きになっとる思いますう。（さきほど、**一応**ゆうたのは、sleepersGeneratorん中が、`while(true)` になとって、`sleepers`が終わらないイテレータになってしまうところが、ちょっとキモチワルイという点ですねん。）
98
+ 上のコード、コピペしたHTMLファイル作ってブラウザに表示すれば期待されてる動きになっとる思いますう。（さきほど、**一応**ゆうたのは、sleepersGeneratorん中が、`while(true)` になとって、`sleepers`が終わらないイテレータになってしまうところが、ちょっとキモチワルイという点ですねん。）
99
99
 
100
- が、しかし、上のコードでも `Array.from` 使うんは「何か変」て感じや。なんでゆうたら`Array.from`が返す配列を使ってないからのう。こういうときは、document.querySelectorAll('div') の返した要素のリストに対して、[forEach](https://developer.mozilla.org/ja/docs/Web/API/NodeList/forEach)使えばええ。
100
+ そやけど、上のコードでも `Array.from` 使うんは「何か変」て感じや。なんでゆうたら`Array.from`が返す配列を使ってないからのう。こういうときは、document.querySelectorAll('div') の返した要素のリストに対して、[forEach](https://developer.mozilla.org/ja/docs/Web/API/NodeList/forEach)使えばええ。
101
101
  ```diff
102
102
  - Array.from(document.querySelectorAll('div'), async item => {
103
103
  + document.querySelectorAll('div').forEach(async item => {

9

ソース修正

2021/09/11 19:03

投稿

退会済みユーザー
answer CHANGED
@@ -56,7 +56,7 @@
56
56
  item.style.background = "red";
57
57
  ```
58
58
  の直前で0.5秒待つゆう処理を入れてできへんの？ 」ゆうことかもしれへんね。
59
- それだとすると、一応、こないにすればできる。
59
+ それだとすると、**一応**、こないにすればできる。
60
60
  ```html
61
61
  <!DOCTYPE html>
62
62
  <html lang="ja">
@@ -95,7 +95,7 @@
95
95
  </body>
96
96
  </html>
97
97
  ```
98
- 上のコード、コピペしてブラウザに表示すればいちおう期待されてる動きになっとる思いますう。（一応ゆうたのは、`while(true)` になとって、終わらないイテレータになってしまうところが、ちょっとキモチワルイという点ですねん。）
98
+ 上のコード、コピペしてブラウザに表示すればいちおう期待されてる動きになっとる思いますう。（さきほど、**一応**ゆうたのは、sleepersGeneratorん中が、`while(true)` になとって、`sleepers`が終わらないイテレータになってしまうところが、ちょっとキモチワルイという点ですねん。）
99
99
 
100
100
  が、しかし、上のコードでも `Array.from` 使うんは「何か変」て感じや。なんでゆうたら`Array.from`が返す配列を使ってないからのう。こういうときは、document.querySelectorAll('div') の返した要素のリストに対して、[forEach](https://developer.mozilla.org/ja/docs/Web/API/NodeList/forEach)使えばええ。
101
101
  ```diff

8

ソース修正

2021/09/11 13:30

投稿

退会済みユーザー
answer CHANGED
@@ -95,4 +95,10 @@
95
95
  </body>
96
96
  </html>
97
97
  ```
98
- 上のコード、コピペしてブラウザに表示すればいちおう期待されてる動きになっとる思いますう。（一応ゆうたのは、`while(true)` になとって、終わらないイテレータになってしまうところが、ちょっとキモチワルイという点ですねん。）
98
+ 上のコード、コピペしてブラウザに表示すればいちおう期待されてる動きになっとる思いますう。（一応ゆうたのは、`while(true)` になとって、終わらないイテレータになってしまうところが、ちょっとキモチワルイという点ですねん。）
99
+
100
+ が、しかし、上のコードでも `Array.from` 使うんは「何か変」て感じや。なんでゆうたら`Array.from`が返す配列を使ってないからのう。こういうときは、document.querySelectorAll('div') の返した要素のリストに対して、[forEach](https://developer.mozilla.org/ja/docs/Web/API/NodeList/forEach)使えばええ。
101
+ ```diff
102
+ - Array.from(document.querySelectorAll('div'), async item => {
103
+ + document.querySelectorAll('div').forEach(async item => {
104
+ ```

7

ソース修正

2021/09/11 12:57

投稿

退会済みユーザー
answer CHANGED
@@ -46,4 +46,53 @@
46
46
  ```
47
47
  でええわいね ➡ [サンプル](https://codepen.io/i8086x/pen/QWgvMeO?editors=1010)
48
48
 
49
- さらに上のコード詰めるとすると、 質問の前提としてはArray.from 使うんがお題ゆうことやけど、for ... of でループさせるもんを配列にしとかなあかんわけではないねんから、[コレ](https://codepen.io/i8086x/pen/ZEyKXWq?editors=1010)でええやろ思いますー
49
+ さらに上のコード詰めるとすると、 質問の前提としてはArray.from 使うんがお題ゆうことやけど、for ... of でループさせるもんを配列にしとかなあかんわけではないねんから、[コレ](https://codepen.io/i8086x/pen/ZEyKXWq?editors=1010)でええやろ思いますー
50
+
51
+
52
+ ### 補足
53
+
54
+ 質問者さんが知りたいのは、「（for (...of ... )使えばできるのは分かった。そやけど） `Array.from`　の第二引数として渡す関数、`item => { ・・・・ }` の中で、divの背景を赤にする
55
+ ```javascript
56
+ item.style.background = "red";
57
+ ```
58
+ の直前で0.5秒待つゆう処理を入れてできへんの？ 」ゆうことかもしれへんね。
59
+ それだとすると、一応、こないにすればできる。
60
+ ```html
61
+ <!DOCTYPE html>
62
+ <html lang="ja">
63
+ <head>
64
+ <meta charset="UTF-8">
65
+ <title></title>
66
+ <script>
67
+
68
+ const sleepersGenerator = async function* (milliseconds) {
69
+ while (true) {
70
+ yield new Promise(resolve => { setTimeout(resolve, milliseconds); });
71
+ }
72
+ }
73
+
74
+ window.onload = function() {
75
+ const sleepers = sleepersGenerator(500);
76
+ Array.from(document.querySelectorAll('div'), async item => {
77
+ await sleepers.next();
78
+ item.style.background = "red";
79
+ })
80
+ }
81
+
82
+ </script>
83
+ </head>
84
+ <body>
85
+ <div>1</div>
86
+ <div>2</div>
87
+ <div>3</div>
88
+ <div>4</div>
89
+ <div>5</div>
90
+ <div>6</div>
91
+ <div>7</div>
92
+ <div>8</div>
93
+ <div>9</div>
94
+ <div>10</div>
95
+ </body>
96
+ </html>
97
+ ```
98
+ 上のコード、コピペしてブラウザに表示すればいちおう期待されてる動きになっとる思いますう。（一応ゆうたのは、`while(true)` になとって、終わらないイテレータになってしまうところが、ちょっとキモチワルイという点ですねん。）

6

ソース修正

2021/09/11 12:38

投稿

退会済みユーザー
answer CHANGED
@@ -45,4 +45,5 @@
45
45
 
46
46
  ```
47
47
  でええわいね ➡ [サンプル](https://codepen.io/i8086x/pen/QWgvMeO?editors=1010)
48
+
48
- さらに上のコード詰めると、 Array.fromで配列にする必要はないねんから、[コレ](https://codepen.io/i8086x/pen/ZEyKXWq?editors=1010)でええやろ思いますわー
49
+ さらに上のコード詰めるとすると、 質問の前提としてはArray.from 使うんがお題ゆうことやけど、for ... of でループさせるもんを配列にしとかなあかんわけではないねんから、[コレ](https://codepen.io/i8086x/pen/ZEyKXWq?editors=1010)でええやろ思いますー

5

ソース修正

2021/09/11 07:26

投稿

退会済みユーザー
answer CHANGED
@@ -27,7 +27,7 @@
27
27
  これでええやん：
28
28
  ```javascript
29
29
  const sleep = (millisec) => new Promise(resolve => {
30
- setTimeout(() => resolve(), millisec);
30
+ setTimeout(resolve, millisec);
31
31
  });
32
32
  ```
33
33
  ゆうsleep作っておいてからの

4

ソース修正

2021/09/11 07:19

投稿

退会済みユーザー
answer CHANGED
@@ -45,4 +45,4 @@
45
45
 
46
46
  ```
47
47
  でええわいね ➡ [サンプル](https://codepen.io/i8086x/pen/QWgvMeO?editors=1010)
48
- さらに上のコード詰めると、 Array.fromで配列にする必要はないねんから、[コレ](https://codepen.io/i8086x/pen/ZEyKXWq?editors=1010)でええわ。
48
+ さらに上のコード詰めると、 Array.fromで配列にする必要はないねんから、[コレ](https://codepen.io/i8086x/pen/ZEyKXWq?editors=1010)でええやろ思いますわー

3

ソース修正

2021/09/11 07:17

投稿

退会済みユーザー
answer CHANGED
@@ -44,4 +44,5 @@
44
44
  }
45
45
 
46
46
  ```
47
- でええわいね ➡ [サンプル](https://codepen.io/i8086x/pen/QWgvMeO?editors=1010)
47
+ でええわいね ➡ [サンプル](https://codepen.io/i8086x/pen/QWgvMeO?editors=1010)
48
+ さらに上のコード詰めると、 Array.fromで配列にする必要はないねんから、[コレ](https://codepen.io/i8086x/pen/ZEyKXWq?editors=1010)でええわ。

2

ソース修正

2021/09/11 07:16

投稿

退会済みユーザー
answer CHANGED
@@ -22,7 +22,9 @@
22
22
 
23
23
  ### 上のやつあかんわ。なんや難しく考えすぎとった。
24
24
 
25
+ 上のやつ、一応ソレっぽく動くけど、なんや難しく考えすぎとったわ。
26
+
25
- これでええやん。
27
+ これでええやん：
26
28
  ```javascript
27
29
  const sleep = (millisec) => new Promise(resolve => {
28
30
  setTimeout(() => resolve(), millisec);

1

ソース修正

2021/09/11 07:02

投稿

退会済みユーザー
answer CHANGED
@@ -18,4 +18,28 @@
18
18
 
19
19
  }
20
20
  ```
21
- ➡ [サンプル](https://codepen.io/i8086x/pen/VwWbbdm?editors=1010)
21
+ ➡ [サンプル](https://codepen.io/i8086x/pen/VwWbbdm?editors=1010)
22
+
23
+ ### 上のやつあかんわ。なんや難しく考えすぎとった。
24
+
25
+ これでええやん。
26
+ ```javascript
27
+ const sleep = (millisec) => new Promise(resolve => {
28
+ setTimeout(() => resolve(), millisec);
29
+ });
30
+ ```
31
+ ゆうsleep作っておいてからの
32
+ ```javascript
33
+ window.onload = async function() {
34
+
35
+ const items = Array.from(document.querySelectorAll('div'));
36
+
37
+ for (const item of items) {
38
+ await sleep(500);
39
+ item.style.background = "red";
40
+ }
41
+
42
+ }
43
+
44
+ ```
45
+ でええわいね ➡ [サンプル](https://codepen.io/i8086x/pen/QWgvMeO?editors=1010)