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

javascript
この記事は約2分で読めます。
スポンサーリンク

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

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

DEMO

なにもダウンロードしないダウンロードボタンです。

ダウンロード

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

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

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);
  }
});
SNSフォローボタン
エンデ・バタローをフォローする
javascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました