トップ JavaScriptに関する質問 JavaScript Array.fromを使う事を条件でsleepを実現したい

編集履歴

回答編集履歴

ソース修正

2021/09/11 19:04

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

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

ソース修正

2021/09/11 19:03

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -114,7 +114,7 @@
 の直前で0.5秒待つゆう処理を入れてできへんの？ 」ゆうことかもしれへんね。
-それだとすると、一応、こないにすればできる。
+それだとすると、**一応**、こないにすればできる。
 ```html
@@ -192,7 +192,7 @@
 ```
-上のコード、コピペしてブラウザに表示すればいちおう期待されてる動きになっとる思いますう。（一応ゆうたのは、`while(true)` になとって、終わらないイテレータになってしまうところが、ちょっとキモチワルイという点ですねん。）
+上のコード、コピペしてブラウザに表示すればいちおう期待されてる動きになっとる思いますう。（さきほど、**一応**ゆうたのは、sleepersGeneratorん中が、`while(true)` になとって、`sleepers`が終わらないイテレータになってしまうところが、ちょっとキモチワルイという点ですねん。）

ソース修正

2021/09/11 13:30

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

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

ソース修正

2021/09/11 12:57

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -95,3 +95,101 @@
 さらに上のコード詰めるとすると、 質問の前提としてはArray.from 使うんがお題ゆうことやけど、for ... of でループさせるもんを配列にしとかなあかんわけではないねんから、[コレ](https://codepen.io/i8086x/pen/ZEyKXWq?editors=1010)でええやろ思いますー
+### 補足
+質問者さんが知りたいのは、「（for (...of ... )使えばできるのは分かった。そやけど） `Array.from`　の第二引数として渡す関数、`item => { ・・・・ }` の中で、divの背景を赤にする
+```javascript
+item.style.background = "red";
+```
+の直前で0.5秒待つゆう処理を入れてできへんの？ 」ゆうことかもしれへんね。
+それだとすると、一応、こないにすればできる。
+```html
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <title></title>
+  <script>
+    const sleepersGenerator = async function* (milliseconds) {
+      while (true) {
+        yield new Promise(resolve => { setTimeout(resolve, milliseconds); });
+      }
+    }
+    window.onload = function() {
+      const sleepers = sleepersGenerator(500);
+      Array.from(document.querySelectorAll('div'), async item => {
+        await sleepers.next();
+        item.style.background = "red";
+      })
+    }
+  </script>
+</head>
+<body>
+<div>1</div>
+<div>2</div>
+<div>3</div>
+<div>4</div>
+<div>5</div>
+<div>6</div>
+<div>7</div>
+<div>8</div>
+<div>9</div>
+<div>10</div>
+</body>
+</html>
+```
+上のコード、コピペしてブラウザに表示すればいちおう期待されてる動きになっとる思いますう。（一応ゆうたのは、`while(true)` になとって、終わらないイテレータになってしまうところが、ちょっとキモチワルイという点ですねん。）

ソース修正

2021/09/11 12:38

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

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

ソース修正

2021/09/11 07:26

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -56,7 +56,7 @@
 const sleep = (millisec) => new Promise(resolve => {
-    setTimeout(() => resolve(), millisec);
+    setTimeout(resolve, millisec);
 });

ソース修正

2021/09/11 07:19

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

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

ソース修正

2021/09/11 07:17

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -91,3 +91,5 @@
 ```
 でええわいね ➡ [サンプル](https://codepen.io/i8086x/pen/QWgvMeO?editors=1010)
+さらに上のコード詰めると、 Array.fromで配列にする必要はないねんから、[コレ](https://codepen.io/i8086x/pen/ZEyKXWq?editors=1010)でええわ。

ソース修正

2021/09/11 07:16

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -46,7 +46,11 @@
+上のやつ、一応ソレっぽく動くけど、なんや難しく考えすぎとったわ。
-これでええやん。
+これでええやん：
 ```javascript

ソース修正

2021/09/11 07:02

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -39,3 +39,51 @@
 ```
 ➡ [サンプル](https://codepen.io/i8086x/pen/VwWbbdm?editors=1010)
+### 上のやつあかんわ。なんや難しく考えすぎとった。
+これでええやん。
+```javascript
+const sleep = (millisec) => new Promise(resolve => {
+    setTimeout(() => resolve(), millisec);
+});
+```
+ゆうsleep作っておいてからの
+```javascript
+window.onload = async function() {
+    const items = Array.from(document.querySelectorAll('div'));
+    for (const item of items) {
+        await sleep(500);
+        item.style.background = "red";
+    }
+}
+```
+でええわいね ➡ [サンプル](https://codepen.io/i8086x/pen/QWgvMeO?editors=1010)