JavaScriptの処理順

Question

実現したいこと

setTimeoutとループ処理を使うことで、
処理順を制御できずに困っています。

▼理想
親ループ-1
↓
子ループ-1-1
子ループ-1-2
↓
親ループ-2
↓
子ループ-2-1
子ループ-2-2

▼現状
子ループの途中で、親ループの処理が始まってしまう

該当のソースコード

let step = 0;
while(step <= 2) {
  let i = 0;
  console.log('親ループ：'+step);
	while(i <= 2) {
    setTimeout(function () {
    console.log('子ループ：'+step+'+'+i);
    i++
    }, 1000);
	}
	step++
	}

同期非同期について勉強してみましたが、
setTimeoutがはいるとよくわからなくなってしまい困っています。
ご教授お願いします。

Answer 1

▼現状
子ループの途中で、親ループの処理が始まってしまう

ループそのものは同期的に書かれているので、きちんと途中で回ってはいます。ただ、setTimeoutなど非同期の処理は同期的処理が全部片付いてから実行されるので、console.logの出力は最後になります。

forやwhileの途中に非同期処理を混ぜて、それも順番通りに実行されるようにしたい…のであれば、async-awaitを使うのが便利です。

Answer 2

多分こういうことですよね？

<script type="module">
for(let i=0; i<2;i++){
  console.log(`親ループ：${i}`);
  for(let j=0; j<2;j++){
    const message=await new Promise(resolve=>setTimeout(()=>{
      resolve(`子ループ：${i}+${j}`);
    },1000));
    console.log(message);
  }
}
</script>

あとは姑息ですがすべて非同期で処理するとか

<script>
const max_i=2;
const max_j=2;
for(let i=0; i<max_i;i++){
  setTimeout(()=>console.log(`親ループ：${i}`),i*max_j*1000);
  for(let j=0; j<max_j;j++){
    setTimeout(()=>console.log(`子ループ：${i}+${j}`),(i*max_j+j+1)*1000);
  }
}
</script>

Comments

[Ussserrrr]

Promise使う方の使い方がまだ理解しきれていないので、
参考にさせていただきつつ勉強していきます。
最悪姑息バージョンで動かしてみます！
ありがとうございました！