JavaScript でイベント待ちする方法

February 27, 2022

例えば Window.alert() のように、ユーザがボタンをクリックするまでの間、処理を止めたい場面があったとします。

このとき、パッと思いつくのは、

ビジーウェイトする方法
Promise の解決を待つ方法

です。（間違いなく後者を採用すべきです。）

それぞれのコード例を掲載します。

いずれのコードも、ボタンが押下されたら後続の処理が開始され、コンソールにメッセージが出力されます。

ビジーウェイトする方法 #

<!DOCTYPE html>
<html>
  <body>
    <button id="button">Button</button>
  </body>

  <script type="text/javascript">
    const button = document.getElementById('button');

    let pushed = false;

    button.addEventListener('click', () => (pushed = true));

    while (pushed === false) {}

    console.log('Execute subsequent processes.');
  </script>
</html>

Promise の解決を待つ方法 #

<!DOCTYPE html>
<html>
  <body>
    <button id="button">Button</button>
  </body>

  <script type="text/javascript">
    const button = document.getElementById('button');

    const clickWaiter = () => new Promise((resolve) => button.addEventListener('click', resolve));

    const main = async () => {
      await clickWaiter();
      console.log('Execute subsequent processes.');
    };

    main();
  </script>
</html>