【アニメーション向け】async/await で待機時間を指定し順次実行する方法

目的

• async/await を使って順次実行する方法を例示する。
• アニメーションなど、待機時間を指定して順次実行するもの例示とする。

前提

async/await の処理でよく例示されるのは API 周りのものが多いと思う。
一方アニメーション関連で、 async/await を使いたいと感じたが例が少ないと思ったのでまとめる。

やりたいこと

自然言語で書くと、以下のようになる。
これをネストなどなくシンプルに書きたい。

・ 500msかけて ボールを投げる
・ 100msかけて バットを振る

準備

時間指定をして実行を遅らせる delay メソッドを作っちゃえば事足りる。
duration の時間だけ実行を遅らせる。

const delay = (duration: number) => {
  return new Promise((resolve) => {
    setTimeout(() => resolve(null), duration);
  });
};

使い方

シンプルな使い方

一番単純には、以下のようになる。
startThrowingBallAnimation と startSwingingBatAnimation は アニメーションを開始させるだけで、アニメーションの終了をフィードバックしたりはしない。

(async () => {
  startThrowingBallAnimation();
  await delay(500);
  startSwingingBatAnimation();
  await delay(100);
}();

メソッドをまとめる

待ち時間と実行アニメーションをメソッドにまとめると便利になる。
async をつけて、 delay と アニメーションのメソッドを一緒にする

const throwBall = async () => {
  startThrowingBallAnimation()
  await delay(100);
}

引数を取ることや、戻り値を取ることもできるので、待ち時間を可変にしたりアニメーションメソッドの戻りを返したりもできる。

const swingBat = async (duration: number) => {
  const bat = startSwingingBatAnimation()
  await delay(duration);
  return bat;
}

自然言語に近い書き方で記述できた。

(async () => {
  throwBall();
  const bat = swingBat(100);
}();