JavaScript forとsetTimeoutと配列を組み合わせた謎の挙動について

Question

id="a"、b、cが最終的に全てleft:90%になるプログラムです
最終的に全てleft:90%になりません
原因がわからずにいます

setTimeoutを呼び出した時点でdocument.getElementById(i[n])のi[n]の中身は呼び出し時点の配列の中身で登録されていると思うのですが、違うんでしょうか

原因がわかる方教えてください

<script>
window.onload=function(){
i=["a","b","c"];
x=["10","50","90"];
for(let n=0;n<i.length;n++){
for(let j=0;j<x.length;j++){
setTimeout(function(){
document.getElementById(i[n]).style.left=x[j]+"%";
},1000*Math.floor(Math.random()*5));
}
}
}
</script>

<div id="a" style="width:100px;height:100px;background:red;position:absolute;left:0%">
</div>
<div id="b" style="width:100px;height:100px;background:green;position:absolute;left:0%">
</div>
<div id="c" style="width:100px;height:100px;background:blue;position:absolute;left:0%">
</div>

Comments

[dameo]

多分0%→乱数時間空けて→10%→乱数時間空けて→50%→乱数時間空けて→90%としたいのでしょうけど、現状では
0%→乱数時間空けて→10%
0%→乱数時間空けて→50%
0%→乱数時間空けて→90%
が平行で動いているため、最初の乱数時間よりも後ろ2つの乱数時間が短ければ先に90%や50%になってしまい、順番が狂ってしまいます。平行で動かさないためには、10%や50%にした「後」に「さらに待つ処理を入れ」ないawaitやPromiseを使わずに簡単に書くとこんな感じかと思います。

<script>
window.onload = function() {
i = ["a", "b", "c"];
x = ["0", "10", "50", "90"];
const f = function(i_idx, x_idx) {
document.getElementById(i[i_idx]).style.left = x[x_idx] + "%";
if (++x_idx < x.length) {
setTimeout(f, 1000 * Math.floor(Math.random() * 5), i_idx, x_idx);
}
}
for(let n = 0; n < i.length; n++) {
f(n, 0);
}
}
</script>
<div id="a" style="width:100px;height:100px;background:red;position:absolute;left:0%"> </div>
<div id="b" style="width:100px;height:100px;background:green;position:absolute;left:0%"> </div>
<div id="c" style="width:100px;height:100px;background:blue;position:absolute;left:0%"> </div>

Answer 1

こういうことでしょうか？

window.addEventListener('DOMContentLoaded', async()=>{
  i=["a","b","c"];
  x=["10","50","90"];
  for(let n=0;n<i.length;n++){
    for(let j=0;j<x.length;j++){
      await new Promise(resolve=>{
        setTimeout(()=>{
          document.getElementById(i[n]).style.left=x[j]+"%";
          resolve();
        },100*Math.floor(Math.random()*5));
      });
    }
  }
});

Answer 2

配列 x の各項目が順番に関係なく乱数秒後にleftプロパティにセットされるので、j が 2 のときの乱数が一番大きかったときだけ最終的に90%になります。setTimeout()は予約をするだけで即座に返ってくることがポイントです。

やりたいことがいまいちはっきりしませんが、「乱数 * 5 秒後に90%にしたい」ということでしょうか。

for (let n = 0; n < i.length; n++) {
  let finishDuration = 1000*Math.floor(Math.random() * 5);
  for (let j = 0; j < x.length; j++) {
    setTimeout(function(){
      document.getElementById(i[n]).style.left = x[j] + "%";
    }, finishDuration * (j + 1) / x.length);
  }
}

  for (let n = 0; n < i.length; n++) {
    let finishDuration = 1000 * Math.floor(Math.random() * 5);
    document.getElementById(i[n]).animate(
        [{left: '0%'}, {left: '90%'}], {duration:finishDuration, fill:'forwards'});
  }

「乱数 * 5 秒後に10%、その乱数 * 5 秒後に50%、その乱数 * 5 秒後に90%」であれば:

for (let n = 0; n < i.length; n++) {
  let duration = 0;
  for (let j = 0; j < x.length; j++) {
    duration += 1000 * Math.floor(Math.random() * 5);
    setTimeout(function(){
      document.getElementById(i[n]).style.left = x[j] + "%";
    }, duration);
  }
}

3つの要素も(並列ではなく)順番に動かしたいなら:

let duration = 0;
for (let n = 0; n < i.length; n++) {
  for (let j = 0; j < x.length; j++) {
    duration += 1000 * Math.floor(Math.random() * 5);
    setTimeout(function(){
      document.getElementById(i[n]).style.left = x[j] + "%";
    }, duration);
  }
}