入れ子になっている関数で、非同期処理を実現したい。

Question

前提・実現したいこと

入れ子になっている関数の最深部に非同期で処理したい関数がある時、それらが全て完了した時に行いたい処理を関数の外側で処理する方法が知りたい。

該当のソースコード

var array = [['リンゴ', 'バナナ'],
        ['イチゴ','メロン']
];

array.forEach((item) => {
        item.forEach((item) => {
                setTimeout(() => {
                        console.log(item);
                },1000);
        });
});

console.log('finish');

finishを最後に表示させたい。
もしできたら、

試したこと

ここに問題に対して試したことを記載してください。

Answer 1

Promise.all()を利用するとよいでしょう。
Promise.all() - JavaScript | MDN

var array = [
  ['リンゴ', 'バナナ'],
  ['イチゴ','メロン']
];

var promiseList = [];

array.forEach((item) => {
  item.forEach((item) => {
    
    var promise = new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log(item);
        resolve();
      },1000);
    });
    
    promiseList.push(promise);
    
  });
});

Promise.all(promiseList).then(() => {
  console.log('finish');
});

Answer 2

forEachの様な構文処理ではなくmapのような戻り値を得た方がpromiseが活かしやすいですね

Promise.all(array.map((item) => new Promise(async resolve=>{
  await Promise.all(item.map((item) => new Promise(resolve=>{
    setTimeout(() => {
      console.log(item);
      resolve();
    },1000);
  })));
  resolve();
}))).then(()=>{
  console.log('finish');
});

もしくは二次配列ならflatしてしまう方が楽です
またPromise.allするならsetTimeout内でconsoleせず戻りを待ってから出力するほうが楽です

Promise.all(array.flat().map((item) => new Promise(resolve=>{
  setTimeout(() => {
    resolve(item);
  },1000);
}))).then((data)=>{
  data.forEach(item=>console.log(item));
  console.log('finish');
});

Answer 3

入れ子になっている関数の最深部に非同期で処理したい関数がある

setTimeout はシングルスレッドなので、全ての setTimeout を実行後に console.log('finish') をしかけた setTimeout (待ち時間0)をしかければ、最後に動作します。

item.forEach((item) => {
  setTimeout(() => {
          console.log(item);
  },1000);
});

1秒後にタイマー処理が連続実行されるので、

1. setTimeout を一つにする
2. forEach で console.log(item)
3. console.log('finish')

にすれば、格段にシンプルなコードで書けます。

Re: hiroHero さん

Comments

[think49]

続いたのでコメントで補足します、
主題は2つ目のほうで「1秒後に4個のタイマー処理を連続して実行する」のは明らかな無駄なので、「1秒後に一つのタイマー処理(forEach含む)を実行する」に修正したほうが効率も見通しも良くなると考えます。
一つにまとまったら、console.log('finish'); はタイマー処理の中で書くのと大して変わりません。
どうしても console.log('finish'); を他スコープに逃がしたければ、setTimeoutの第三引数に関数を指定してコールバックすれば良いかと。