document.onmousemove delay

Question

私は、キャンバス上でマウスとキーボードのコントロールで高価なスクリプトを作成しようとしています。 私はこのコントロールを行うためにdocument.onmousemoveとdocument.onkeydown/onkeyupを使用していますが、いずれかのボタンを押すと「onkeydown」が多く実行され、マウスがひどく遅れます。それは "write-onlyマウス位置バッファ"か何かのように見えます。私がキーを離すと、マウスは以前の動きを "シミュレート"します。 私はFirefoxとChromeでこの問題をテストしましたが、この問題はFFのみに存在します。ここ

は、20ミリ秒のあなたのタイマー間隔が短すぎるとCPUの多くの時間を取ってどのように複雑なあなたupdate、interactとdraw機能に応じていくつかのコード

document.onmousemove = function(e){ 
     obj = canvas; 
     var curleft = curtop = 0; 

     do { 
      curleft += obj.offsetLeft; 
      curtop += obj.offsetTop; 
     } while (obj = obj.offsetParent); 

     mX = e.pageX - curleft; 
     mY = e.pageY - curtop; 
    } 

    var dt=0.02; 
    setInterval(tick, dt*1000); 
    update(dt); 
    function tick() { 

     if((!pause) || step) 
     { 
      update(dt); 
      step = false; 
     } 
     interact(); 
     draw(); 
    } 

Answer 1

です。 JavaScriptは単一のスレッドで実行されるため、スクリプトによってマウスイベントが処理されない可能性があります。

これらのイベントは、ブラウザの入力キューにキューイングされ、後でスクリプトに送出される可能性があります（Firefoxでおそらく発生している）か、スクリプトがそれらをすばやく処理しないと破棄されますクロム）。

いくつかの回避策：

1. は、タイマー間隔を増やします。
2. setIntervalを使用する代わりに、tickを実行するたびにsetTimeoutを試してください。これにより、複数のタイマーイベントがキューイングして同時に発火することがなくなります。