フロントエンジニアになるための練習問題 押すと色が変わるボタン4

前回の課題の続きです。

課題

クライアントから、さらなる依頼をもらいました。

  • 一度ボタンを押すと、５秒間はクリックされても色が切り替わらないようにしてほしい

今回はこちらを実装してみます。

前提

  • setTimeout を使うことができる

30分から1時間程度。

実装の流れ

今回の実装方法としては以下のようにすることにしました。

  • ボタンを押せるかどうかのフラグ(true/false)をつくる
  • ボタンが押されたときに、フラグがfalseなら処理を抜ける
  • ボタンが押されたときに、フラグがtrueならfalseにし、色を変える処理を続行する。
  • フラグは5秒後にtrueにする

実装例

まず、ボタンが押せるかどうかのフラグを実装します。

　　　　let canClick = true;

ボタンがクリックされたときに、このフラグを参照して、false なら return します。

return することでその後の処理は実行されませんので、「false なら色を変える処理は動かない」ことになります。

        startButtonEl.addEventListener("click", () => {
          if(!canClick) return; //追加

          if(startButtonEl.classList.contains("red-active") || startButtonEl.classList.contains("blue-active") || startButtonEl.classList.contains("yellow-active")){
            startButtonEl.classList.remove("red-active", "blue-active", "yellow-active");
          }else{
            const value = getRandom(1, 3);
            const applyClass = getClass(value);
            startButtonEl.classList.add(applyClass);
          }
        });

もし、false ではなかった場合、つまり true ならフラグを false にします。

        startButtonEl.addEventListener("click", () => {
          if(!canClick) return;

　　　　　　canClick = false; //追加

          if(startButtonEl.classList.contains("red-active") || startButtonEl.classList.contains("blue-active") || startButtonEl.classList.contains("yellow-active")){
            startButtonEl.classList.remove("red-active", "blue-active", "yellow-active");
          }else{
            const value = getRandom(1, 3);
            const applyClass = getClass(value);
            startButtonEl.classList.add(applyClass);
          }
        });

これで、一度クリックすると、その後クリックしても二度と色が変わらないようになります。

このままではNGなので、最後に setTimeout 使って、5秒後にフラグを true に戻すようにします。

　　　　　let canClick = true;

        startButtonEl.addEventListener("click", () => {
          if(!canClick) return;

          canClick = false;
          setTimeout(() => {
            canClick = true;
          }, 5000);　//追加

          if(startButtonEl.classList.contains("red-active") || startButtonEl.classList.contains("blue-active") || startButtonEl.classList.contains("yellow-active")){
            startButtonEl.classList.remove("red-active", "blue-active", "yellow-active");
          }else{
            const value = getRandom(1, 3);
            const applyClass = getClass(value);
            startButtonEl.classList.add(applyClass);
          }
        });

動作確認をします。

ボタンをクリックすると色が変わり、５秒間はクリックしても色が変わりません。

5秒経過してからクリックすると、再び色が変わるようになります。

JavaScript, プログラミング入門

Posted by たみぼうず