【JavaScript】送信ボタンの連続クリックを防ぐ4つのテクニック

Webアプリケーションやウェブサイトでよく見られる問題の一つが、送信ボタンの連続クリック（いわゆる「2度押し」）です。この問題は、ユーザーが誤ってボタンを複数回クリックすることで、不必要なリクエストがサーバーに送られる可能性があります。これが原因でデータの重複登録や不整合が発生することもあります。

この記事では、JavaScriptを使用して送信ボタンの連続クリックを防ぐ4つの方法を詳しく解説します。

ボタンを無効化する

送信ボタンが一度クリックされたら、JavaScriptを使ってそのボタンを無効化します。

document.getElementById("submitButton").addEventListener("click", function() {
  // 何らかの処理
  this.disabled = true;
});

この方法は非常にシンプルで、多くの場合で効果的です。ただし、何らかの理由でユーザーが再度同じ操作を行いたくなった場合、ボタンが無効化されているため操作ができません。

クリックフラグを使用する

クリックされたかどうかを判断するフラグ変数を使用します。

let isClicked = false;

document.getElementById("submitButton").addEventListener("click", function() {
  if (isClicked) {
    return;
  }
  
  isClicked = true;
  
  // 何らかの処理
});

この方法では、isClickedというフラグ変数を用いてボタンが既にクリックされたかどうかを判断します。これにより、2度目のクリックを無視することができます。

タイムアウトを設定する

一定時間後にボタンを再度有効化します。

document.getElementById("submitButton").addEventListener("click", function() {
  this.disabled = true;
  
  setTimeout(() => {
    this.disabled = false;
  }, 3000); // 3秒後にボタンを再度有効化
});

この方法は、一定時間（この例では3秒）ボタンを無効化することで、連続クリックを防ぎます。タイムアウト期間が過ぎれば、ボタンは自動的に再有効化されます。

Promiseを使用する

非同期処理が終わった後にボタンを再度有効化します。

document.getElementById("submitButton").addEventListener("click", async function() {
  this.disabled = true;
  
  await someAsyncFunction();
  
  this.disabled = false;
});

非同期処理（例えば、APIリクエスト）が終了したら、ボタンを再有効化する方法です。これにより、必要な処理が完了するまでユーザーは次のアクションを取れなくなります。

まとめ

送信ボタンの連続クリックは、多くのWebアプリケーションで問題となることがあります。しかし、上記で紹介したようなJavaScriptのテクニックを用いることで、この問題を効果的に解決することができます。シチュエーションに応じて最適な方法を選びましょう。