ボタンの連続入力防止方法

トグルメニューを実装した時に、連続クリックすると、遅れてクリックした回数分アニメーションが再生してしまう不具合がありましたので、その対策を紹介します。

<dl class="toggle">
  <dt>開閉ボタン</dt>
  <dd style="display:none;">
    <li>開閉コンテンツリスト<br>
    開閉コンテンツリスト2
  </li></dd>
</dl>

$(function(){
  $('.toggle dt').click(function(){
    $(this).next().slideToggle(600);
  });
});

上のコードで連続クリックするとその回数だけアニメーションが保存され、遅れて何回もアニメーションしてしまいます。

$(function(){
  $('.toggle dt').click(function(){
    $(this).next().stop(true, false).slideToggle(600);
  });
});

上のコードは.stop(true, false)を追加しました。これで連続クリックすると、現在のアニメーションを途中で中断して次のアニメーションに移行する動きをします。

$(function(){
  $('.toggle dt').click(function(){
    if($(this).next().not(':animated').length >= 1){
      $(this).next().slideToggle(600);
    }
  });
});

2つ目はアニメーションする要素（開閉するコンテンツ）が動作していないときだけ、開閉する動作をします。つまりクリックすると、0.6秒のデッドタイムがあります。

個人サイトでも、企業サイトでも連続動作するサイトをちらほら見かけますよね。ひと工夫するだけでこの不具合は解消されるので、みんなもやってみよう！

参考