JavaScript で 3 秒待ちたい

• あるWebサービスの開発メモ・目次ページに戻る
• あるWebサービスの開発メモ・JavaScript チートに戻る

怪しいループを書いたときに

「このループが抜けてこなかったらマズいな」

「従量課金、大丈夫かな？」

といった不安を感じる時って、だいたい失敗しています。ログ出力が追いつかないほどクライアントサイドでブン回ってしまうと収拾がつかなくなってしまいます。

そこで Wait の登場です。

実装方式はいろいろと検討してみましたが、どれも私にはわかりにくい実装でした。こちらの先生 が公開してくれている async function を利用するものがとてもわかりやすかったので、実装と動作確認をおこなってみました。

(指定された時間待つだけの関数を内包したPromiseオブジェクトを返す関数を用意する)

  const wait = (msec: number) => {
    return new Promise((resolve, reject) => {
      setTimeout(resolve, msec);
    });
  };

(上記の関数とその後で実行したい処理を async を付けた関数に記述する)

  async function waitAfterCall() {
    try {
      await wait(3000);
      // ここに目的の処理を書く
    } catch (err) {
      console.error(err);
    }
  }

  waitAfterCall();

async function は ECMAScript 2017 (ECMA-262) で追加された機能なので使えないブラウザがあるのかもしれません。読みにくいけど確実な実装も用意しておきたいところですが、そうなった時に考えようかな、と思っているところです。