俺帰ったら結婚するからわ。今から風呂いって田んぼの様子みるけど。どうだ!やったか!?
フラグでの制御について考えていきましょう。
フラグを立てることにより余計な操作を制御することができます。
では実際にやってみる
では例として、スライドダウン/アップの処理を例にだしてみます。
$('.slide1').on('click',function() { if($('.slide1Elem').css('display') == 'none') { $('.slide1Elem').slideDown(500); } else { $('.slide1Elem').slideUp(500); } });
ボタンを2連打した場合以下の動作になりました。
1:閉じている場合から2連打
→開いてすぐ閉じた
2:開いている場合から2連打
→閉じただけで開かない
なんでこんな動きになるのか
ではまず、閉じている状態からの2連打を
- 1回目のクリック:この時点ではulはdisplay:noneなので、slideDownが動く
- 2回目のクリック:slideDownが動くということは、display:noneではないのでslideUpがキューにたまる
- 1回目のクリックが完了後、たまっていたキューのものが実行される
ではまず、開いている状態からの2連打を
- 1回目のクリック:この時点ではulはdisplay:noneではないので、slideUpが動く
- 2回目のクリック:display:noneではないので、slideUpがキューにたまる
- 1回目のクリックが完了後、たまっていたキューのものが実行されるが、既に非表示済のためslideUpは動いているが、見た目動いていない
(*゚∀゚)<キュー?(*゚∀゚)<キューちゃん?(*゚∀゚)<Qちゃん!!!!!
キューとはなにかですが、つまり処理の順番待ちの事です。
今回はslide系を使いましたが、それらが実行されるとまずキューにたまります。
キューは来た順番に1つずつ処理を実行していくのです。
(*゚∀゚)←処理 (・ω・`)←キュー 三三(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*゚∀゚)<ヒャッハー!!!!
重複したくない処理の場合は、処理開始先頭でフラグチェック
チェックを通ったらフラグをたてて
処理終了後にフラグを戻す
この流れはきちんと把握しておきましょう。