jQueryでクリック(click)での、連打を防止してアニメーションが終わるまでクリックボタン無効にする

jQueryでスライドやらギャラリーを自作していると

画面の移り変わり、画像の入れ替え等にアニメーションを使うことが多いです

アニメーションが動いている間に

ボタンをクリックされてしまうと、連続して実行されたり

中断されたりで、意図しない動きを起こすことがあります

見栄え的にもブサイクです

そこで、アニメーションが終わるまでそのボタンを無効にして

アニメーションが終わったら再び、ボタンとして機能するように clickが出来るようにします

jQueryで連打を防止する

var click_flg = true;
$(".next").on('click',function(){
  
  if(click_flg){
    //ボタンを一旦無効に
    click_flg = false;

    //実行内容
    $(slide).animate(
      {'left':0},
      500,
      function() {
        //アニメーションが終わってから trueにするように指定
        click_flg = true;
      }
    );

  } else {
    return false;
  }

click_flgの値が true か false かで実行するかしないかをチェックします

初期値では var click_flg = true; で実行出来るようになっています

if を使って true か false かで動作を振り分けます

true ならばアニメーションを実行

false ならば何もしない

まずアニメーションを実行する前にクリックされたことで click_flg を false にします

これによって、クリックによるアニメーション実行を停止します

これでボタンが無効になります

無効になったあとにアニメーションを実行します

そして、アニメーションが終わってから再び click_flg を true にして

ボタンとしてクリック出来るように有効にします。

ポイントはアニメーションの終わりとともに click_flg を true にしてやることです