5

私はjQueryに基づいて音楽プレーヤーを開発しています。これには、メインセクションにアイテムの長いリストがあります（アーティスト、アルバム、タイトルに関する情報については、各<li>に<div>要素がある順序付けられていないリスト）。

ここから一時的な公開バージョンにアクセスできます：http： //music.sixteennet.co.uk/？anonymous

（すべての曲は公開バージョンではダッドリンクなので、わざわざ何も再生しないでください：P）

まず、これが正確に何であるかについての簡単な説明：

左側にはサイドバーがあり、登場する曲のリストが表示されます。ユーザーは、アーティストを検索/クリックした後、メインリストで曲を選択し（クリック、Shiftキーを押しながらクリック、Ctrlキーを押しながらクリック、ドリルを知っています）、を押すかドラッグアンドドロップして、左側のプレイリストに追加します。私はこれをすべて機能させています（この質問は、Javascriptユーザーインターフェイスの構築方法に関するものではありません）。

問題：$（window）.mousemove（）、.mouseup（）、および.mousedown（）には、高さがピクセル単位で（16 *メインリストで選択された曲の数）[各<li >は16pxの高さです]。マウスを動かすと、このボックスも一緒に動きます。マウスがプレイリストの上にくると、プレイリストの色が変わり、ユーザーがmouseup（）（クリック解除）を選択すると、選択した曲がプレイリストに追加されます。

唯一のことは、選択した曲のボックスが現在表示されている状態でマウスを動かしている場合、Google Chromeではボックスの動きが非常に遅くなりますが、マウスがメインの曲のリストの上にある場合に限ります（ただし、CPU使用率は100％のままです。ボックスが表示される時間）。Firefox6およびIE9では、動きは全体を通してスムーズであり、CPU使用率は100％ではありません（Athlon 64 3500+でも）。このテストは、2台のPCで（私が）繰り返しました。1台はWindows 7を実行し、もう1台はUbuntuLinuxを実行しています。

私はそれがグーグルクロームのバグだと非常に疑っています、しかし誰かがソースコードを調べて問題が何であるかを教えてくれる善意があれば（もしあれば）...あなたは私にとって神です:)

編集：私がChrome / V8と言った理由は、同じレンダリングエンジン（WebKit）を使用するSafariにはこの問題がないためです（Firefox / IE9 / Operaほどスムーズではありませんが）

4

2 に答える 2

4

私は解決策を見つけたので、私自身の質問に答えるつもりです：

ボックスでこのjQuery関数を実行すると、ラグの問題が修正されました。

$.fn.disableSelection = function() {
  return this.each(function() {
    $(this).attr('unselectable', 'on')
    .css({
      '-moz-user-select':'none',
      '-webkit-user-select':'none',
      'user-select':'none',
      '::selection':'none',
    })
    .each(function() {
      this.onselectstart = function() { return false; };
    });
  });
};
于 2011-10-25T13:34:46.303 に答える
1

コンピュータに遅れは見られません...

とにかく、おそらくアンダースコアのスロットル関数のようなものを使用して、イベントハンドラーを呼び出すことができる頻度を減らすことを試みることができます

于 2011-10-24T23:56:41.360 に答える