一度押したボタンを一定時間使えなくするスクリプト

Javascript

簡単な機能だし、実装しているサイトはたくさんある。のだけど、イマイチ理解できてなかった。「指定した時間ごとに関数を呼び出す」というヘンチクリンなsetInterval関数とそれの解除の組み合わせ方が肝だったのだと分かりました。

http://hiropon.sub.jp/ajax/0208-1.html



function btnDisable(){ //①

  document.getElementById("btn").disabled = true;

  clearInterval(statusDis);

}
function btnAble(){  //②

  document.getElementById("btn").disabled = false;

  clearInterval(statusAble);

}



function clicked(){ //① + ②

  statusDis  = setInterval(btnDisable , 1); //ボタンを押した直後に①を呼び出し

  statusAble = setInterval(btnAble , 3000); //ボタンを押して三秒後に②を呼び出し

}

  • disabledをtrueにする関数①と、disabledをfalseにする関数②を二つ用意しておく
  • それぞれの関数内に自身の解除に使うclearIntervalを突っ込んでおく。
  • ①と②をセットにした関数を容易
  • 時間差で起動するようにする
  • これで「○秒間」だけボタンを使えなくするスクリプトができた
  • clearIntervalをセットしておかないと、いつまでも関数が呼ばれ続けるので注意