3

以下のような処理があったとき、重い処理はsetTimeoutで処理すべきでしょうか?

$(document).bind("keydown keyup",function(e){
    if (e.type === "keydown"){
        ... //重い処理
    }
    if (e.type === "keyup"){
        ... //別の処理
    }
});

つまり、このようにすべきでしょうか?

$(document).bind("keydown keyup",function(e){
    if (e.type === "keydown"){
        setTimeout(function(param1,param2){
            ... //重い処理
        },0,prm1,prm2);
    }
    if (e.type === "keyup"){
        ... //別の処理
    }
});

あるキーがkeydownされたら重い処理を行い、keyupされたら別の軽い処理を行っているのですが、重い処理が途中で終わってしまっている気がします。
実際には、undo処理みたいなことをctrl+Zkeydownでやってるんですが、途中で終わっているというか、長くkeydownするとちゃんと動くような感じで困ってます。
重い処理といっても、何秒もかかるようなものではありません。せいぜい長くて数百ミリ秒~1秒だとおもいます。

いかんせん、ここ最近JavaScriptもjQueryも始めたため、ちゃんと理解出来ていないと思います。宜しくお願いします。


捕捉します。重い処理で行った結果を受けて、別の処理を行います。
実際にはundoを行うとブラウザ上の要素のサイズ等変更を元に戻す、そのようにしようとしています。


分かりづらいので、捕捉します。
上記の処理で、keydownkeyupとは、処理を共有していますが、keydownkeyupでイベントを引いている無名関数はそれぞれ別々に非同期処理されているのだと思っています。ただ、わたしはJavaScriptを使って間もないのでその辺の理解が間違っているかもしれません。

keydownされ、重い処理がはじまってkeyupされるまでに処理が終わらず、それでおかしなことが起きているのだろうかと思っています。

もし、そのばあいkeydown側の重い処理が終了してからkeyupの処理を行わせる(keyupが完了していてキー操作とずれても構わないので)といいますか適切に待つ処理が必要なら、御教示いただけると助かります。

JavaScriptではクリティカルセクションのような仕組みはないかと調べていましたが、ローカル側でそんなことをしちゃいけないのでしょうか?

3
  • 2
    ご質問に「思っています」「気がします」など確実に確認されたことが少なすぎるように思います。各行の前後にconsole.logを挟むなどして、どの処理がどのような順番で実行されているか確認してみてください。「無名関数はそれぞれ別々に非同期処理されている」については全くの間違いでそんなことはありません。
    – OOPer
    Commented 2016年3月3日 21:28
  • keyupだけを取ってkeydown用の処理とkeyup用の処理を順に行う方式でも良いのですか?keydown時に動く必要がありますか?
    – kotatsu
    Commented 2016年3月4日 1:40
  • >> Le Pere d'OOさん すみません、無名関数の非同期についてはわたしの誤解でした。 言いたかったのは、keydownkeyupイベントでトリガーされる無名関数がそれぞれ違うスレッドなのかと思っていたのです。これも勘違いのようですが。 Imageオブジェクトで画像ロード完了後に実行されるonloadがそういう印象を感じたので、イベント全般に誤解があったようです。
    – tomorin
    Commented 2016年3月4日 13:03

2 件の回答 2

1

おそらく同時に非同期処理を行うものが複数あり、どのメソッドのcallbackで完了すればよいか分からないパターンかと推測しました。

複数の非同期処理を同時に動かして、その完了を待つには$.Deferred$.whenを使います。

一応例を示しますが、何をどうしているのか分からないのでとりあえず完了時間の違う複数のanimateの一番時間がかかるアニメーションが完了するまで待つような処理にしています。

例のような処理をしたい場合、keydownkeyupで分けるよりkeyupだけを取ってkeydown相当の処理とkeyup相当の処理をメソッド化してkeyupイベントの発火時に処理すれば良いと思います。

$(document).ready(function() {

  $(document).on('keyup',function(e){

    // keydown処理を待ってkeyup処理を行う
    $.when(
      keydownProcess()
    ).done(
      keyupProcess
    );
  });

  $('input').on('click', function(){
    $('.target').width(300).height(50).text('');
  });
});
  
// keydown処理相当  
// 完了する時間がバラバラな非同期処理で一番処理時間が長いものが終わってから完了を返す
function keydownProcess()
{
  $('#target1').text('keydown process');
  var d = new $.Deferred;
  $.when(
    // ここに非同期メソッドをかく
    $('#target1').stop().animate({width:150}, 500),
    $('#target2').stop().animate({width:150}, 1000)
  ).done(function(){
    d.resolve();
  });
  return d.promise();
}

// keyup処理相当  
function keyupProcess()
{
  $('#target1').text('keyup process');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<input type="button" value="戻す" />
<div id="target1" class="target" style="background: #aaffff; width: 300px; height: 50px"></div>
<div id="target2" class="target" style="background: #aaffaa; width: 300px; height: 50px"></div>

参考URL:
http://techblog.yahoo.co.jp/programming/jquery-deferred/
http://qiita.com/yuku_t/items/1b8ce6bba133a7eaeb23

1
  • 仰る通り、key連打されると遅延してどれがどれだかわからなくなってしまうかもしれません。 $.Deffered$.whenというのは知りませんでした。ちゃんとjQueryの参考書を買うべきかもしれません。 大変参考になりました!ありがとうございます。
    – tomorin
    Commented 2016年3月4日 13:00
1

良い記事があったので紹介します。

JavaScriptの同期、非同期、コールバック、プロミス辺りを整理してみる - Qiita

大前提として、JavaScriptはシングルスレッドで動いています。
これはつまり、JavaScriptは並行処理はできないということです。

よって、keydownの重い処理が、終わるまで、keyup の処理は走らないものと思います。(setTimeout などを使い、割り込みを許しているなら別なのですが)

var c = 0
$(document).bind("keydown keyup", function(e) {
  $console = $("#console")
  c += 1
  if (e.type === "keydown") {
    start = end = new Date().getTime()
    while (end - start < 1000) {
      end = new Date().getTime()
    }
    $console.append(e.type + ": " + c + "<br>")
  }
  if (e.type === "keyup") {
    $console.append(e.type + ": " + c + "<br>")
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
Event Console
<div id="console">
</div>

keydown と keyup の順番を確認するテストをしてみましたが、keydown の後に keyup が走りました。
keydown で1秒待つ、というものです。。

3
  • 分かりづらくてすみません。 わたしが気にしているのは、keydownされて重い処理がはじまり、その前にkeyupされてしまうから妙なことが起きているのかと思っているんですが、ここでkeydownkeyupは処理を共有していますが、別々のスレッドとでもいいますか、無名関数の中は別々のタイミングで非同期に実行されると思っています。この認識、間違っていたりしますか? また、ご呈示頂いた処理を二つに分けるのとわたしの書いたkeydown keyupまとめて書くのとでは違いがあるのでしょうか?
    – tomorin
    Commented 2016年3月3日 14:36
  • 1
    JavaScriptはシングルスレッドで動いており、keyupやkeydown、またはsetTimeoutによって実行される関数は、そのイベントが発生してすぐ実行されるのではなく、待ち行列に追加されます。なので、keydownの重い処理の実行中にkeyupイベントが発生しても、その処理は待ち行列に追加され、keydownの処理が終わるまで実行されません。setTimeoutだとしても同様に待ち行列処理です。割り込みは起きません。
    – mok2pok
    Commented 2016年3月4日 4:25
  • てっきり、タイミングが指定出来ないだけで複数のスレッドで動作しているものと勘違いしていました。イベントのキューに積まれて順次実行されるということが分かっただけでも大変助かります。有り難うございました!
    – tomorin
    Commented 2016年3月6日 10:03

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。