javascript - onMouseMoveによるオブジェクトの動きのジャンプを防ぐには?

Question

_{これは回答されている可能性がありますが、検索で肯定的な結果が見つかりません。}

「通常の」 x、y 配置を超えて、さまざまな追加の計算を使用して要素を移動するスクリプトを用意します。

私は JQuery やその他のライブラリを使用していませんが、ここにコアのサンプルがあります: >> fiddle <<

当面の問題は、要素を移動すると、次のように更新されない場合があることです。ポインターを移動すると、要素が静止し、大きなジャンプが発生します。

これは、何らかの理由で、ゆっくりと移動しているときに最も頻繁に発生します。(おそらく常にそうですが、速い動きではそれほど目立ちません。)

x,y への単純な移動を行うときにもこの効果が見られますが、それほど頻繁ではありません。

質問は、これを引き起こす原因と、できれば修正方法です。

最後のmousemove -event がたとえば 10 ミリ秒前であったかのように、時間にチェックを追加しようとしました。何もしません。それ以上ではありません。

次のように、要素の位置をタイムアウトに設定しようとしました。

setTimeout(function(){
    element.style.left = x + 'px';
    element.style.top  = y + 'px';
}, 0);

ブラウザに他の作業をさせますが、それ以上のことはしません。

これは、私がテストしたブラウザーの Mozilla Firefox で最も顕著です。Opera は間違いなく最もスムーズです。

編集：

シンプルに追加

 console.log('1');

そして、動きがハングすると、ログもハングする (ログに記録されない) ことに気付きました。

、446 eventsラグ、のよう447 eventsです。

そのため、トリガーされていないイベントの領域のどこかに立つ必要があります。

編集：

@kenansulayman:

明確にするために。私は使用しませんsetTimeout()– 0,1,2,3,5,10,15,...,500+ を使用してテストしましたが、より良い結果は得られませんでした:

私もこれを使ってテストしました：

マウスダウンでこれを開始します：

Drag.int = 0;
Drag.eint = setInterval(function(){Drag.int++}, 1); /* 1 being variable. */

そして、動きの遅れ/停止が発生すると、move追加時に1 増加します。ギャップはありません。次のように:console.log(Drag.eint)Drag.int

447
448
449 <-- lag, movement stop, aprox 1-1.5 seconds
450
451

setTimeout()タイムアウトが10または20のいずれかを含める場合はそうではありません。

要点を完全に見逃している場合は、お知らせください。

score 1 · Accepted Answer

クライアント側の遅延状況を回避する方法はありません。ただし、]x|y[ 座標の単純な補間を提案します。

つまり、次のことができます。

ここで、最近取得したk 個の座標の異常値 (ジャンプ (ラグ) が発生した場合に適用される) をテストし、ジャンプを補間します。

高度な提案:

補間、高次

nは補間の次数です。通常、アプリケーションでは、]4|7[ の間の値が適切です。

外れ値の検出に関しては、基本的なGrubbs の外れ値検定またはStahel-Donoho Outlyingnessを使用することをお勧めします。

1 に答える 1