jqueryでのkeydownイベント発生回数制御

解決済

質問者：vaki1031
質問日時：2011/04/10 01:37
回答数：2件

main.html*************************************

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<meta http-equiv="Content-Style-Type" content="text/css">
<link href="css/ffUI.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/ffmain.js"></script>
</head>
<body>
<div id="main">
</div>
</body>
</html>

ffUI.css***************************************
* {margin:0;padding:0;}
#main {width:320px;height:240px;overflow:hidden;}
#map {margin-top:0px;margin-left:0px;}

ffmain.js**************************************

mainFunction();

function mainFunction(){
$("#main").append('<div id="map"><image src="image/maptest.gif"></div>');
$(window).bind("keydown",mainKeyIvent);
}

function mainKeyIvent(e){
switch(e.keyCode){
case(38):
$("#map").animate({marginTop:"+=16px"});
break;
case(40):
$("#map").animate({marginTop:"-=16px"});
break;
case(37):
$("#map").animate({marginLeft:"+=16px"});
break;
case(39):
$("#map").animate({marginLeft:"-=16px"});
break;
}
}

というコードを書いて、RPGのMAPのように、
出した画像が上下左右のキーで16ピクセルずつ動くコードを書いてみたんですが、
一応動きはしますが、キーを押しっぱなしにすると、
その間にキーイベントが蓄積されて、右を押していたら、
キーを離してもずーっと右に動きっぱなしなってしまったりします。

押している間は動き続けてもいいですが、離した瞬間にちゃんと止まるようにしたいんですけど、
どのようにコーディングすればよいでしょうか？

環境はsafariです。

宜しくお願いしますm(__)m

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： my--
回答日時：2011/04/10 20:31

手っ取り早くやるならstopですかね。

$(window).keyup(function() { $("#map").stop(true); });

引数にtrueを渡せば、実行待ちしているアニメーション処理も削除してくれます。

キーを押し続けるとanimateメソッドが無駄に呼ばれ続け
無駄にキュー登録されますから、止めることを考えるより
無駄に呼び出さない方向で考えないとダメだと思いますけど。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
確かにstopも使えそうなんですが、キュー登録自体は増えてしまうのが難点で....

質問後も色々自分で試してみましたが、

function mainKeyIvent_parts(){
$(window).unbind("keydown",mainKeyIvent);
setTimeout(function(){$(window).bind("keydown",mainKeyIvent);},250);
}

という関数を組んで、キー入力があると、250ミリ秒間（これはアニメの速度によって手動調整）キー入力ができないようにしてみたら一応意図通りに動くようになりました。

ただ、stopの時の様にまだ何か落とし穴があるかもしれませんね、
難しい(泣)

通報する

お礼日時：2011/04/11 09:01

No.1

回答者： think49
回答日時：2011/04/10 13:44

おそらく、animate() は非同期処理なのでしょう。

http://api.jquery.com/animate/

アニメーション中は keydown しても animate() しないように #map をビジー状態にする必要があります。
animate() 処理に移る前に <div id="map" aria-busy="true"></div> のようにして、aria-busy="true" 中は animate() しないようにしてみてください。
http://www.hitachi.co.jp/universaldesign/wai-ari …