「やめて！そのボタンは連打しないで！」
そのつらい気持ち、よくわかります。
今回はフラグを立てて、ボタン連打の対策をやってみましょう。
jQuery
＜処理のルート＞cancelFlag という変数を定義しておき、値が「0」の場合は処理開始、「1」の場合は処理キャンセル、という判定を追加するだけです。意外とシンプル。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
$(function(){ // 処理キャンセルのフラグを定義：0…処理可能 1…キャンセル var cancelFlag = 0; //++++++++++++++++++++++++++++ //クリックした時に長い長い処理をする $('#clickKey').on('click',function(){ if( cancelFlag == 0 ){ //++++cancelFlagが0であれば処理開始+++++ // 1. まずcancelFlgを立てる（1にする） cancelFlag = 1; // 2. 処理を記述（今回は10000ミリ秒かかるアニメーション） $('#moveBox').css('width','0').animate({width:'100%'},10000); // 3. 処理が終わったらcancelFlagをおろす（0に戻す） setTimeout(function(){ cancelFlag = 0; },10000); } }); }); |
上記の例だと、クリックイベントが着火した直後に cancelFlag に「1」を代入、フラグを立てます。
そして処理が終了する際に「0」を代入し、フラグをおろす。これでフラグが立っている間はクリックを連打しても処理が重複しません。
今回はsetTImeoutを使用して時間経過で切り替わるようにしていますが、お好みで書き換えてください。
▼デモも作成しました。
処理中（cancelFlagが1の時）にボタンをクリックすると、「処理中です」とアラートが表示されるようになっています。
