JavaScript Array.fromを使う事を条件でsleepを実現したい

Question

Array.fromを使う事を条件としたsleepを実現したいです
下記コードだと一瞬で全て赤に変わりますが
1個変わったら0.5秒あけて1個変えて0.5秒あけてを繰り返したいです
どういうコードで実現できるでしょうか

<script>
window.onload=function(){
Array.from(document.querySelectorAll('div'), item => {
item.style.background="red";
});
}
</script>

<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>

リアルタイムに1個づつ色が変わる、という動きにならない・・・

<script>
window.onload=function(){
Array.from(document.querySelectorAll('div'), item => {
item.style.background="red";

const d1 = new Date();
while (true) {
  const d2 = new Date();
  if (d2 - d1 > 1000) {
    break;
  }
}

});
}
</script>

<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>

Comments

[think49]

とりあえず、Array.fromのリファレンスを読んでください。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/from
第二引数に指定された関数に「0.5秒後に実行する」という機能はありませんので、即時実行されます。

Answer 1

手段が目的化

Array.fromを使う事を条件としたsleepを実現したいです

手段が目的化しています。
目的を見据えて、手段を選択するのがスマートなコードを書くコツだと思います。

• 「XY 問題」とは何ですか？ - スタック・オーバーフローMeta

window.setTimeout()

setTimeout() は「非同期処理」の「コールバック処理」であり、配列化による恩恵はあまりありません。

• WindowOrWorkerGlobalScope.setTimeout() - Web API | MDN

<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>

<script>
'use strict';
setTimeout(function handleTimeout (div, config) {
  div[config.i++].style.backgroundColor = 'red';
  setTimeout(handleTimeout, 500, ...arguments);
}, 500, document.querySelectorAll('div'), {i: 0});
</script>

Promise

「Promise の逐次処理」と相性の良い Array.prototype.reduce() を使う為に Array.from() を活用するケースは考えられます。

• 4.8. Promiseによる逐次処理 - JavaScript Promiseの本
• Array.prototype.reduce() - JavaScript | MDN

<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>

<script>
'use strict';
function createTimeoutCallFn (div) {
  return () => new Promise((resolve, reject) => {
    setTimeout(div => {
      div.style.backgroundColor = 'red';
      resolve();
    }, 500, div);
  });
}

Array.from(document.querySelectorAll('div')).reduce((promise, div) => promise.then(createTimeoutCallFn(div)), Promise.resolve());
</script>

ただし、Array.prototype.reduce() を使用しなくても実装可能です。

<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>

<script>
'use strict';
function createTimeoutCallFn (div) {
  return () => new Promise((resolve, reject) => {
    setTimeout(div => {
      div.style.backgroundColor = 'red';
      resolve();
    }, 500, div);
  });
}

let promise = Promise.resolve();

for (let div of document.querySelectorAll('div')) {
  promise = promise.then(createTimeoutCallFn(div));
}
</script>

Re: vcxr さん

Comments

[think49]

「Array.fromを使う」という「手段」を元に「配列を使うべき目的」を逆算しましたが、やはり、順序が逆だと思います。

Answer 2

window.onload = function() {

    const fncs = Array.from(document.querySelectorAll('div'), item => () => 
        new Promise(resolve => {
            setTimeout(() => {
                item.style.background = "red";
                resolve();
            }, 500);
        })
    );
  
    (async () => {
        for (const f of fncs) {
            await f();
        }
    })();

}

➡ サンプル

上のやつあかんわ。なんや難しく考えすぎとった。

上のやつ、一応ソレっぽく動くけど、なんや難しく考えすぎとったわ。

これでええやん：

const sleep = (millisec) => new Promise(resolve => {
    setTimeout(resolve, millisec);
});

ゆうsleep作っておいてからの

window.onload = async function() {
  
    const items = Array.from(document.querySelectorAll('div'));
  
    for (const item of items) {
        await sleep(500);
        item.style.background = "red";
    }

}

でええわいね ➡ サンプル

さらに上のコード詰めるとすると、 質問の前提としてはArray.from 使うんがお題ゆうことやけど、for ... of でループさせるもんを配列にしとかなあかんわけではないねんから、コレでええやろ思いますー

補足

質問者さんが知りたいのは、「（for (...of ... )使えばできるのは分かった。そやけど） Array.from　の第二引数として渡す関数、item => { ・・・・ } の中で、divの背景を赤にする

item.style.background = "red";

の直前で0.5秒待つゆう処理を入れてできへんの？ 」ゆうことかもしれへんね。
それだとすると、一応、こないにすればできる。

<!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>

上のコード、コピペしたHTMLファイル作ってブラウザに表示すれば期待されてる動きになっとる思いますう。（さきほど、一応ゆうたのは、sleepersGeneratorん中が、while(true) になとって、sleepersが終わらないイテレータになってしまうところが、ちょっとキモチワルイという点ですねん。）

そやけど、上のコードでも Array.from 使うんは「何か変」て感じや。なんでゆうたらArray.fromが返す配列を使ってないからのう。こういうときは、document.querySelectorAll('div') の返した要素のリストに対して、forEach使えばええ。

- Array.from(document.querySelectorAll('div'), async item => {
+ document.querySelectorAll('div').forEach(async item => {

Answer 3

while()で回っている間、リペイントが起こらないので、赤くしても最後まで再描画されません。

<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>

<script>
const _sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

const toRed = async (elem,ms) => {
  await _sleep(ms);
  elem.style.background="red";
}

window.onload=function(){
  const a = Array.from(document.querySelectorAll('div'));
  for (let i = 0; i < a.length; i++) {
    toRed(a[i], i*500);
  }
}
</script>