for文内にsetTimeoutがある関数に対して、promise(async/await)を用いて非同期処理をスマートに記述したい。

Question

いつもお世話になっております、今実現したいことはタイトル通りです。
下記のコードを実行すると、当然先に「Done」が出力されてしまいます。
そこでaddTypingMovement内でPromiseを返すようにして、thenで繋げてfinishTitleCallを実行しようと思っているのですが、その場合どのようにresolveを記述すればよいのか分かりません。
一応最終ループ時（iがword.length - 1の時）にさらに200msずらしてresolveすれば期待通りの動作にはなるのですが、それではPromiseを使う意味がほぼ無いですし、分からないなりにベストプラクティスでは無いだろうという事を薄々感じています。

自分なりに調べてみたのですが、こういったケースに参考になる記事等が見つけられず、手詰まりになっています。
そもそもPromiseに対する理解があまり深くなく、的外れな質問をしてしまっていたら申し訳ありません。

ですが宜しければ、お力添えをよろしくお願いいたします。

サンプル → https://jsfiddle.net/rdvy39b8/

<p id="title"></p>
<p id="result"></p>

const addTypingMovement = (word, target) => {
  const wordArray = [...word];
  const printTarget = document.querySelector(target);
  for(let i = 0; i < wordArray.length; i++) {
    setTimeout(() => {
      printTarget.textContent = printTarget.textContent + wordArray[i];  
    }, i * 200)
  }
}

const finishTitleCall = () => {
  document.querySelector('#result').textContent = 'Done.'
}

addTypingMovement('Hello World.', '#typing');
finishTitleCall();

Answer 1

こんにちは

この回答では３つのコードを挙げます。ご質問のタイトルに、

for文内にsetTimeoutがある関数に対して、・・・

とあったので、 まずご質問のコードにある forループを生かしたコードを回答します。その後、for文を使わないコードを２つ挙げます。

1. forループで、各文字を追加するPromiseの配列を作る。

各文字を追加していく処理をひとつのPromiseにして、それらがすべてresolve されたら、Doneを表示するという前後関係を担保するために、 Promise.all を使えばよいかと思います。

以下、ご質問に挙げられているコードに、上記の趣旨の追加をしたものです。

const addTypingMovement = (word, target) => {
  const promises = [];
  const wordArray = [...word];
  const printTarget = document.querySelector(target);
  
  for(let i = 0; i < wordArray.length; i++) {    
    const p = new Promise(resolve => {
      setTimeout(() => {
        printTarget.textContent = printTarget.textContent + wordArray[i];
        resolve();
      }, i * 200)
    });    
    promises.push(p);
  }

  return promises;
}

const finishTitleCall = () => {
  document.querySelector('#result').textContent = 'Done.'
}

Promise.all(addTypingMovement('Hello World.', '#typing')).then(finishTitleCall);

以下は、ご質問に挙げられている jsFiddle をFork して、上記の修正版にしたものです。

• 動作確認用 jsFiddle: https://jsfiddle.net/jun68ykt/6wsp3onu/6/

2. forの替わりにmapを、前後関係の制御にasync/awaitを使用

上記 1. のコードで、Promiseの配列を作るところの for文を map を使って書き換え、 すべての文字が target に追加されたら、Done を表示するために async, await を使った例が以下です。

const addTypingMovement = (word, target) => {

  const printTarget = document.querySelector(target);
    
  return [...word].map((char, i) => new Promise(
    resolve => {
      setTimeout(() => {
        printTarget.textContent += char;
        resolve();
      }, i * 200);
    })    
  );

}

const finishTitleCall = () => {
  document.querySelector('#result').textContent = 'Done.';
}

(async () => {
  await  Promise.all(addTypingMovement('Hello World.', '#typing'));
  finishTitleCall();
})();

• 動作確認用 jsFiddle: https://jsfiddle.net/jun68ykt/6wsp3onu/25/

3. 最後の文字まで表示するのを一つのPromiseにする。

上記の 1. と 2. とは異なり、「200ミリ秒間隔でひと文字ずつ、最後の文字まで表示する」という処理をひとつの Promise にすることもできます。以下のそのコード例です。

const addTypingMovement = (word, target) => new Promise(
  resolve => {
    const printTarget = document.querySelector(target);
    let i = 0;  
    const intervalId = setInterval(
      () => {
        if (i < word.length) {
          printTarget.textContent = word.substring(0, ++ i);
        } else {
          clearInterval(intervalId);
          resolve('Done.');          
        }        
     }, 200);
  }
);

const finishTitleCall = (message) => {
  document.querySelector('#result').textContent = message;
}

(async () => {
  const message = await addTypingMovement('Hello World.', '#typing');
  finishTitleCall(message);
})();

　　　

• 動作確認用 jsFiddle: https://jsfiddle.net/jun68ykt/bcm7jgzw/14/

上記では、

• setTimeoutの替わりにsetIntervalを使っています。
• 文字列全体が表示されるまでをひとつの Promise にするので、 Promise.all は使わなくなっています。
• Done.という文字列を resolveの引数で返させるようにしました。

以上、参考になれば幸いです。

Comments

[take-t.t.]

ご回答ありがとうございます、複数の方法も教えていただき恐縮です。
自分では思いつかない方法ばかりでとても勉強になりました。

ただ自分の理解力が足りず、2つ目のasync/awaitを用いた例のコードに不明な点があるため少し質問させて下さい。
まずaddTypingMovementは、word.length個のPromiseオブジェクトを値に持つ配列をreturnする関数であり、
各Promiseオブジェクトのコールバックに、配列のindex * 200ms後に処理を実行するタイマーが格納されている、という事でしょうか？
私の感覚では、飽くまでPromiseを返す関数というより、mapにより配列を返す関数を実行しているように見え、どのように動いているのかイマイチ理解できませんでした。
各Promiseオブジェクトのタイマーはどのタイミングで呼ばれているのでしょうか？

[jun68ykt]

コメントありがとうございます。

> 2つ目のasync/awaitを用いた例のコード

へのご質問に回答します。

> まずaddTypingMovementは、word.length個のPromiseオブジェクトを値に持つ配列をreturnする
> 関数であり、各Promiseオブジェクトのコールバックに、配列のindex * 200ms後に処理を
> 実行するタイマーが格納されている、という事でしょうか？

はい。そのご理解で合っています。

回答に書いた３つのコードの中で、関数addTypingMovementが Promiseオブジェクトを返しているのは、３つ目のコードのみです。

> 各Promiseオブジェクトのタイマーはどのタイミングで呼ばれているのでしょうか？

setTimeout関数が呼ばれるタイミング（＝ タイマーがスタートするとき）は、Promiseオブジェクトが new で作成されるときです。それがより明確に分かるコード例を以下に書きました。

https://jsfiddle.net/jun68ykt/xh6wksyc/4/

上記の例では、各 Promise に渡すコールバックでは、 resolve も reject も受け取っておらず、単に、各文字で１秒ずつ長い時間でタイマーをセットして、タイムアウトしたらその文字を console に出力しています。Promiseの基礎知識として、Promiseオブジェクトには以下の３つの状態

・Pending --- promiseオブジェクトが作成されたときの状態
・Fulfilled --- resolve(成功)した時の状態
・Rejected --- reject(失敗)した時の状態

がありますが、上記の例では、resolveもrejectもしていないので、各Promiseオブジェクトの状態はPendingのままですが、各Promiseのコールバック本体にある setTimeout で設定された関数が、指定の時間後に実行されて、consoleに、1秒ごとに h,e,l,l,o と一文字ずつ表示されるのを確認できると思います。

蛇足ですが、Promise の基礎を押さえるには、以下をお勧め致します。

JavaScript Promiseの本 ( @azu_re さん著 )
https://azu.github.io/promises-book/

まずは上記の
　Chapter.1 - Promiseとは何か
　Chapter.2 - Promiseの書き方
を読むと、かなり整理できると思います。

[take-t.t.]

ご返信ありがとうございます。

頂いたコードを動かしながらなんとか理解できました。
Promiseに関して適当に理解した気になっていた部分が多々あり、質問の内容とはズレたところでお手数をおかけしてしまい申し訳ありませんでした。
Promiseの本を参考に一から学びなおしてみます。

改めまして、複数回にも渡ってご回答頂き本当にありがとうございました。

[jun68ykt]

どういたしまして。
> 頂いたコードを動かしながらなんとか理解できました。
とのことでよかったです ????