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

この記事は約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);
  }
});
エンデ・バタローをフォローする
javascriptjQueryサイト制作

埼玉県北本市に越してきて2年と少しになります。以前は東京都の京王線沿線に、その前は神戸の三宮、さらにその前は名古屋の八事霊園近くに住んでいました。

怖い話が大好きで、ネット怪談、ホラー小説、心霊Youtuber(オウマガドキch、ゾゾゾ)を寝る前のお供にしてます。

フロントエンドエンジニアとして9年目のキャリアを積んでおり、figma、Illustrator、Photoshop、WordPress、HTML、CSS(scss)、JavaScript(jQuery)、PHPなど使って日々仕事をしています。

仕事で検索する手間を省くためフロントエンド技術に関するブログを書いています。

エンデ・バタローをフォローする
広告
初めてのブログ

コメント

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