【JavaScript】ボタンの連打を防止する方法｜disabled・fetch+finally・throttle・debounceとの違いまで

const btn = document.getElementById("submit-btn");

btn.addEventListener("click", () => {
  btn.disabled = true; // 1回目で無効化、以降は反応しない
  console.log("送信処理を実行");
});

const btn = document.getElementById("submit-btn");

btn.addEventListener("click", async () => {
  if (btn.disabled) return; // 念のため二重実行ガード
  btn.disabled = true;

  try {
    const res = await fetch("/api/submit", { method: "POST" });
    if (!res.ok) throw new Error("送信失敗");
    console.log("送信完了");
  } catch (e) {
    console.error(e);
  } finally {
    btn.disabled = false; // 成功・失敗にかかわらず必ず戻す
  }
});

const btn = document.getElementById("action-btn");
let processing = false;

btn.addEventListener("click", async () => {
  if (processing) {
    console.log("処理中です");
    return;
  }
  processing = true;

  try {
    await doSomething(); // 実際の処理
  } finally {
    processing = false;  // 完了したら再度クリック可能に
  }
});

// fn を「interval ミリ秒に最大1回」に制限する
function throttle(fn, interval) {
  let last = 0;
  return function (...args) {
    const now = Date.now();
    if (now - last < interval) return; // 間隔内は無視
    last = now;
    fn.apply(this, args);
  };
}

const btn = document.getElementById("action-btn");

// 1秒に1回までしか実行されない
btn.addEventListener("click", throttle(() => {
  console.log("実行（連打しても1秒に1回）");
}, 1000));

document.querySelectorAll(".throttled").forEach((btn) => {
  btn.addEventListener("click", throttle(() => {
    console.log(btn.dataset.action + " を実行");
  }, 1000));
});