1

JavaScript を使用して構築しているマップ アプリケーションのパフォーマンスをスムーズにしようとしています。私は最初にドラッグパンを実装しました

  • オンマウスダウン
  • onmousemove
  • オンマウスアップ

ただし、IE では非常に遅く感じられ、カーソルを非常に速く移動すると、移動を停止するまでマップの位置が更新されないように見えます。

ネイティブ IE イベントを使用するようにコードを変換しました

  • オンドラッグスタート
  • オンドラッグ
  • オンドラゲンド

これらのイベントを使用すると、パフォーマンスが大幅に向上しましたが、標準の css プロパティを使用してマウス カーソルを設定できないようです。カーソルをいくつかの定義済みのものにしか設定できませんが、これは私が望んでいるものではありません。

だから私の質問はです。最初のイベント セットを使用して IE でドラッグをスムーズにする方法、またはネイティブ イベントを使用してカスタム カーソルを設定する方法を教えてください。

編集：コードサンプル

コードは非常にシンプルです。新しいタイルをロードするためのロジックを削除しても (つまり、コンテナーだけが移動されます)、まだぎこちなく感じられます。以下はパン機能です。

// the "this" object refers to the div containing all the tile layers.
function movemap(e) 
{ 
   e = e || window.event;
   var dx = this.mouseX - e.clientX; 
   var dy = this.mouseY - e.clientY; 

   if (dx !== 0 || dy !== 0) {
      this.style.left = parseInt(this.style.left) + dx + 'px'; 
      this.style.top = parseInt(this.style.top) + dy + 'px'; 
      this.mouseX = e.clientX; 
      this.mouseY = e.clientY;
   }
}
4

1 に答える 1

1

コード例がなければ、ドラッグ イベントの動作が遅くなる原因を特定するのは非常に困難です。

イベント実行内で実行しているいくつかの重い操作が原因で、効果が遅くなる可能性があります。ブラウザーのイベント システムは非常に興味深いものです。同期です。つまり、現在の実行が終了するまで、イベントは再びトリガーされません。

つまり、次の 2 つの可能性があります。1. イベント内のコードを最適化して CPU 時間を短縮するか、2. イベントを非同期にして独自のミューテックス/セマフォ ロジックを実装します。

2 つ目は、setTimeout 機能を使用して実行できます。setTimeout,((code),1) を実行すると、イベントは非同期で続行されるため、コードの完了を待たずに次のイベントがディスパッチされます。その場合は、ロックとキューイングについて考え始める必要があることを前もって考えておいてください。キューイングとは、ディスパッチされたすべてのイベントを将来の使用のためにキューに入れることです。

ずっと前に、コードの実行が重いため、非同期イベントのディスパッチもいくつか行いました。それは私のために働いた。多分それはあなたにとってもうまくいくでしょう。

于 2010-02-02T23:20:29.633 に答える