jQueryのアニメーションイベントが連続で発生しないようにする

概要

アコーディオンメニューなどで、同一オブジェクトを用いて開閉する場合、連打されて延々アニメーションが続くことがある。 $.fadeIn()など、キューにストックされるアニメーションイベントが実行され続けるのを防ぐ。

実装

var isAnimate = false;

$('#button').on('click', function () {
  if (isAnimate) {
    return;
  } else {
    isAnimate = true;
    $('.accordion').slideToggle(500, function(){
      // 処理
    }).promise().done(function(){
      isAnimate = false;
    });
  }
});

備考

.promise()は複数のアニメーションイベントが走っている場合、その全てが終了した際に発火する。