お寿司か焼き肉食べたい

まじめな事からしょーもない事まで
めにゅーを開く(投げやり)

俺帰ったら結婚するからわ。今から風呂いって田んぼの様子みるけど。どうだ！やったか！？

フラグでの制御について考えていきましょう。
フラグを立てることにより余計な操作を制御することができます。

では実際にやってみる

では例として、スライドダウン/アップの処理を例にだしてみます。

動作開始 
 $('.slide1').on('click',function()
  {
   if($('.slide1Elem').css('display') == 'none')
   {
    $('.slide1Elem').slideDown(500);
   }
   else
   {
    $('.slide1Elem').slideUp(500);
   }
  });

ボタンを２連打した場合以下の動作になりました。
1:閉じている場合から２連打
→開いてすぐ閉じた
2:開いている場合から２連打
→閉じただけで開かない

なんでこんな動きになるのか

ではまず、閉じている状態からの２連打を

  1. １回目のクリック：この時点ではulはdisplay:noneなので、slideDownが動く
  2. ２回目のクリック：slideDownが動くということは、display:noneではないのでslideUpがキューにたまる
  3. １回目のクリックが完了後、たまっていたキューのものが実行される

ではまず、開いている状態からの２連打を

  1. １回目のクリック：この時点ではulはdisplay:noneではないので、slideUpが動く
  2. ２回目のクリック：display:noneではないので、slideUpがキューにたまる
  3. １回目のクリックが完了後、たまっていたキューのものが実行されるが、既に非表示済のためslideUpは動いているが、見た目動いていない

(*ﾟ∀ﾟ)＜キュー？(*ﾟ∀ﾟ)＜キューちゃん？(*ﾟ∀ﾟ)＜Qちゃん！！！！！

キューとはなにかですが、つまり処理の順番待ちの事です。
今回はslide系を使いましたが、それらが実行されるとまずキューにたまります。
キューは来た順番に１つずつ処理を実行していくのです。 

(*ﾟ∀ﾟ)←処理
(・ω・｀)←キュー

三三(1*ﾟ∀ﾟ)　　　　(・ω・｀)< なんかきた・・・

　　　(1*ﾟ∀ﾟ)　　　(・ω・｀)< 今処理たまってないから実行していいよ

三三(2*ﾟ∀ﾟ)　　　　(・ω・｀)<またきた　　　　(1*ﾟ∀ﾟ)＜ヒャッハー！！！！

　　　(2*ﾟ∀ﾟ)  　　(・ω・｀)< ちょっと待って実行中　　　　(1*ﾟ∀ﾟ)＜ヒャッハー！！！！

ﾟ∀ﾟ)　(2*ﾟ∀ﾟ)　　　(・ω・｀)< うわ・・・またきた　　　(1*ﾟ∀ﾟ)＜ヒャッハー！！！！

(6*ﾟ∀ﾟ)(5*ﾟ∀ﾟ)(4*ﾟ∀ﾟ)(3*ﾟ∀ﾟ)(2*ﾟ∀ﾟ)　　　(・ω・｀)< ・・・　　　:(1；ﾞﾟ'ωﾟ'）:

(6*ﾟ∀ﾟ)(5*ﾟ∀ﾟ)(4*ﾟ∀ﾟ)(3*ﾟ∀ﾟ)(2*ﾟ∀ﾟ)　　　(・ω・｀)< 終わったから次実行していいよ

(6*ﾟ∀ﾟ)(5*ﾟ∀ﾟ)(4*ﾟ∀ﾟ)(3*ﾟ∀ﾟ)　　　　(・ω・｀)< 順番ね　　　　三三(2*ﾟ∀ﾟ)＜ヒャッハー！！！！

以下終わるまでループ

まぁ、そんなわけで処理ってのは溜まっていくものなのです。
fade/slide/animate等はキューがたまる処理
逆にappendなんかは溜まらない処理となります。

で、フラグの話

たまっちゃうので、フラグで管理するのがスムーズかなとは思います。
stopってのもありますが。ここではフラグ管理のお話なので、フラグでいきますね。

動作開始 
var slideMove = 0;
$('.slide2').on('click',function()
{
 if(slideMove == 1) return false;
 slideMove = 1;
 if($('.slide2Elem').css('display') == 'none')
 {
  $('.slide2Elem').slideDown(500,function()
  {
   slideMove = 0;
  });
 }
 else
 {
  $('.slide2Elem').slideUp(500,function()
  {
   slideMove = 0;
  });
 }
});

フラグを導入しました。
フラグ変数が1の時はそもそも処理をそこで終了させる
その条件を抜けたらフラグを1として、実行中とする。
処理が完了(コールバック関数)したらフラグを戻す(0)
とすることで無駄にキューに溜まらないように制御することができます。
今回はキューの話も含んでいましたが、それにかぎらずこういう考え方はとても大事です。

(*ﾟ∀ﾟ)←処理
(・ω・｀)←キュー

三三(1*ﾟ∀ﾟ)　　　　　　　(・ω・｀)< なんかきた・・・

　　　(1*ﾟ∀ﾟ)　　　　　　(・ω・｀)< 今処理たまってないから実行していいよ

三三(2*ﾟ∀ﾟ)　　　　　　　(・ω・｀)<またきた　　　　(1*ﾟ∀ﾟ)＜ヒャッハー！！！！

　　　!?(2*ﾟД´(●三　　　(`ω´#)< 処理中！カエレ！　　　　(1*ﾟ∀ﾟ)＜ヒャッハー！！！！

ﾟ∀ﾟ)　　　　　　　　　　　(・ω・｀)< うわ・・・またきた　　　(1*ﾟ∀ﾟ)＜ヒャッハー！！！！

　　　!?(3*ﾟД´(●三  　　(`ω´#)< 処理中！カエレ！　　　　(1*ﾟ∀ﾟ)＜ヒャッハー！！！！

　　　　　　　　　　　　　(・ω・｀)< 終わった。　　　　　　:(；ﾞﾟ'ωﾟ'）:

三三(4*ﾟ∀ﾟ)　　　　　　　(・ω・｀)< なんかきた・・・

　　　(4*ﾟ∀ﾟ)　　　　　　(・ω・｀)< 今処理たまってないから実行していいよ

　　　　　　　　　　　　　(・ω・｀)< 肉食いたい　　　　　　(4*ﾟ∀ﾟ)＜ヒャッハー！！！！

重複したくない処理の場合は、処理開始先頭でフラグチェック
チェックを通ったらフラグをたてて
処理終了後にフラグを戻す

この流れはきちんと把握しておきましょう。