【jQuery】動作実行中に次を予約
ある動作をキー入力で実行中に、次の動作を予約できるようにする処理
というものを考えています。
上記の流れでは、動作と動作のつながりがなめらかにならず、
キー入力待ち
↓
キー入力検知
↓
キー入力禁止
↓
動作実行
↓
動作終了
↓
(動作のつながりがなめらかにならない!)
↓
キー入力待ち
ぷつぷつ途切れながら動作が続くことになります。
そこで、動作実行中に次の動作を予約できるようにします。
キー入力待ち
↓
キー入力検知
↓
キー入力禁止
↓
動作実行
↓
予約受付開始
↓
動作終了
↓
予約の有無を確認
※あれば『動作実行』へ戻る
↓
キー入力待ち
この処理のキモは、キー入力の可否を保存する変数と、
予約の可否と予約内容を保存する変数の管理だと思います。
それぞれ、『accept』と『reserve』と名づけました。
acceptはtrueかfalseのみが格納されますが、
reserveはそれに加えて予約内容も格納されます。
ちょっとややこしいです。
キー入力待ち
accept:true
reserve:false
↓
キー入力検知
↓
キー入力禁止
accept:false
↓
動作実行
↓
予約受付開始
accept:true
reserve:true
↓
動作終了
↓
予約の有無を確認
reserve:なんらかの値
※あれば『動作実行』へ戻る
↓
キー入力待ち
簡略化した実際のコードはこんな感じです。
//初期設定
var accept = true;
var reserve = false;
//ロード後のイベントハンドラ設定
jQuery(document).ready(function($){
$(document).keydown(processKey);
});
//キー入力を処理する
function processKey(e) {
//キー入力無効中ならば終了
if(!accept) return;
//通常モードか?予約受付モードか?
if(reserve !== false){
//予約受付・変更
reserve = '※予約する動作(ここでは番号)';
}else{
//動作開始
doNormal();
}
}
//動作開始
function doNormal(){
accept = false;
reserve = false;
//ここで何らかの動作setTimeout(endNormal, 1000);
setTimeout(startReserve, 500);
//動作終了前に予約受付を開始する
}
//動作完了後の処理
function endNormal(){
if(typeof reserve == 'number'){
//予約があれば、実行する
doNormal(reserve);
}else{
//予約がなければ、待機状態に戻る
accept = true;
reserve = false;
}
}
//予約受付開始
function startReserve(){
//キー入力を受け付ける
//通常モードではなく予約モードにする
accept = true;
reserve = true;
}
