【JavaScript】
ボタンの連続クリック・2度押しを防止する方法

1.ボタンを2度押しできないようにする
2.ボタンを連続クリックできないようにする

1.の実装イメージ

2.の実装イメージ
（早すぎてわかりにくいですが、連続で押せないようになっています。）

参考文献
・改訂3版JavaScript本格入門　～モダンスタイルによる基礎から現場での応用まで

実装方法についてまずは解説します。

といっても難しいことは何もしません。ボタンを押した後に、ボタンを押せなくする処理を入れればいいだけです。

ここではボタン押下時にボタンをdisabledにすることで２度押し・連続クリックを防止する方法について解説いたします。

まずはボタンの2度押しを防止する方法です。

先ほども説明したように、ボタンを押したときの処理の先頭でボタンを非活性にすればOKです。

実際のコードは以下の通りです。

ボタンにonclickイベントを設定して、その中に処理を記載します。（idが"sample1"というボタンに対して２度押し防止を実装するという想定で記載しています。）

//ボタンの要素を取得
const sample1 = document.getElementById('sample1');

//ボタン押下時のイベントを設定
sample1.onclick = () => {
    //２度押し防止の実装
    sample1.disabled = true;

    /*==============================
    ここにボタンを押した時の処理を記載する
    ===============================*/
};

参考文献：改訂3版JavaScript本格入門　～モダンスタイルによる基礎から現場での応用まで

次にボタンの連続クリックを防止する方法について解説します。

といっても、先ほどとほとんど変わりません。

実装方法としては処理開始時にボタンを非活性にし、処理が完了したらボタンを活性に戻すだけです。

以下は実装例です。（idが"sample2"というボタンに対して連続クリック防止を実装する想定で記述しています。）

//ボタンの要素を取得
const sample2 = document.getElementById('sample2');

//ボタン押下時のイベントを設定
sample2.onclick = () => {
    //連続クリック防止の実装
    sample2.disabled = true;

    /*==============================
    ここにボタンを押した時の処理を記載する
    ===============================*/

    //処理が完了したらボタンを活性状態に戻す
    sample2.disabled = false;
};

ボタンの２度押し・連続クリックを防止するにはボタンを非活性にする。