【JavaScript】１つのボタンのクリック回数によって動作を分岐させたい😭⇦A.どんな回数、分岐数でも作成可能です🤗

はじめに

「開発者用の隠しイベントを入れたいので、1回クリックした時は通常動作で、5回以上クリックした時は別の処理をしたい！」

そういったことはないでしょうか?
今回はjavascriptでクリック回数によって処理を分岐させる方法を解説しようと思います。
通常一つの要素にクリック数に応じて処理を分岐させるのは、ユーザーが連打してくることも考え、あまりこういった実装をすることはありませんが、クリック数に応じて処理を分岐させる方法を解説している記事が日本語でも英語でもほぼありませんでした。

おもしろ系のサイトや、ユーザーからみて使いやすさが変わらないのだったら、普通に使えそうな処理だとも思います:」

需要があるかどうかはわかりませんが解説させていただきます🙇‍♂️

この記事を見るメリット

• クリック回数によって処理を分岐させる方法を理解できる
• setTimeoutの使い方
• クリック回数を多くすることで、隠し機能を実装することができる

対象者

この記事は下記のような人を対象にしています。

• プログラミング初学者
• 駆け出しエンジニア
• Javascriptで複数回クリックを実装したい！
• クリック回数によって処理を分岐させたい！

結論

これで解決🤗

let clickCount = 0
let timer = null
const timeout = 1500
const hogeElement = document.getElementById('hogeElement')

// クリック回数によって動作を分岐
hogeElement.addEventListener('click', () => {
    clickCount += 1
    if (clickCount === 1) {
        timer = setTimeout(() => {
            if (clickCount >= 5) {
                console.log('5回以上クリックした！')
            }
            if (clickCount === 1) {
                console.log('1回クリックした！')
            }
            timer = null
            clickCount = 0
        }, timeout)
    }
})

解説

ざっくりしたロジックの流れ

1. 要素をクリックするとクリックカウントがプラス１される
2. クリックカウントが1になるとタイマーがスタート
3. タイマーが回っている間にクリックした回数で動作を分岐させる

用意する変数

// クリックカウント
let clickCount = 0
// タイマー
let timer = null
// タイマーの秒数
const timeout = 1500
// 要素の取得
const hogeElement = document.getElementById('hogeElement')

ロジックの解説

// 要素をクリックしたら
hogeElement.addEventListener('click', () => {
    // カウントをプラスする
    clickCount += 1
    // カウントが１の時だけ以下の処理をする
    if (clickCount === 1) {
        // タイマーをセット　・ タイマー終了時にカウントに応じた処理をする
        timer = setTimeout(() => {
            if (clickCount >= 5) {
                console.log('5回以上クリックした！')
            }
            if (clickCount === 1) {
                console.log('1回クリックした！')
            }
	    // 処理後に以下の変数をリセット
            timer = null
            clickCount = 0
        }, timeout)
    }
})

おわりに

今回はjavascriptでクリック回数によって処理を分岐させる方法を紹介させていただきました！
ネットに記事があまりなく、少しでも情報を残したいと思ったため作成しようと思いました😊

最後まで記事を見てくださりありがとうございました。
誤字や脱字、コードのリファクタリングできる箇所などがありましたらコメントくださるとありがたいです!
また、いいねをしてくださると、筆者が喜びます:)