jQueryでボタン連打を防止する方法

フォームやチュートリアルの「選択ボタン」や「進むボタン」、「戻るボタン」を作る時、
連打防止がついてるとめっちゃ親切。
ボタン連打防止があるサイトを見ると丁寧に作ってあるなぁと感心しちゃいます。
今回は、そんな関心出来るサイトを作るために付けたい、連打防止ボタンの作り方を解説します。

まずは、デモでご確認を。
滅茶苦茶に連打してみてください。

ちゃんと連打防止ができました！
さらに、押した数だけ処理が繰り返されることなく出来てるのが嬉しい。

では次に、連打防止のソースをどうぞ！

jQuery

var click = true;
$(".btn").on("click", function() {
  if(click) {
    click=false;
    $(".anime").animate({width: "100%"}, 1000, function() {
     click = true;
    });
  }
});

この連打防止のjQueryでは、始めに「click」に「true」を入れます。
なぜ、この「true」の入った変数が必要なのか？
それは次の行の「.btn」を押した時に必要になるため。
もし「.btn」を押した時に「click」が「true」だったら、アニメーションします。

ここが連打防止のキモの部分！
「click」が「true」の時だけ、ダウンロードアニメーションが行われるので、
アニメーション中は「false」にし、終わったら「true」に戻せば、連打防止ボタンの完成！
今回は「animate()」を使ったけど、「setTimeout()」でも、同様に連打防止ができます。

「setTimeout()」バージョンの連打防止

var click = true;
$(".btn").on("click", function() {
  if(click) {
    click=false;
    setTimeout(function() {
      click = true;
    }, 1000);
    $(".anime").animate({width: "100%"}, 1000);
  }
});