Question

我正在开发一个基于jQuery的音乐播放器，它在主要部分有很长的项目列表（无序列表，每个＆lt; li＆gt;中有＆lt; div＆gt;元素，有关艺术家，专辑和标题的信息）。

您可以在此处访问其临时公开版本： http://music.sixteennet.co.uk/?anonymous

（所有歌曲都是公共版本的哑巴链接，所以不要打扰任何东西：P）

首先，快速描述一下究竟是什么：

左侧是侧边栏，显示即将播放的歌曲列表。用户在搜索/单击艺术家后选择主列表中的歌曲（单击，按住Shift键单击，按住Ctrl键单击，您知道练习），然后通过点击或拖放将其添加到左侧的播放列表中即可。我已经完成了所有这些工作（这个问题不是关于如何构建Javascript用户界面）。

问题：$（window）.mousemove（）,. mouseup（）和.mousedown（）包含用于查看框的函数，高度以像素为单位（16 *主列表中选择的歌曲）[每个＆lt; li＆gt;是16px高]。当移动鼠标时，此框随之移动，直到鼠标在播放列表上方，播放列表改变颜色，如果用户决定鼠标（）（取消单击），则所选歌曲将添加到播放列表中。 / p>

唯一的一点是，当鼠标移动时，当前可见的选定歌曲框中，在谷歌浏览器中，该框的移动非常滞后，但只有当鼠标位于主歌曲列表上时（不过，在显示框的整个过程中，CPU使用率保持在100％。在Firefox 6和IE 9中，整个运动流畅，CPU使用率不是100％（即使在Athlon 64 3500+上）。我在两台PC上重复了这项测试，一台运行Windows 7，另一台运行Ubuntu Linux。

我非常怀疑这是谷歌Chrome的一个错误，但如果有人有良好的意愿通过源代码并告诉我问题是什么（如果有的话）......你是我的上帝：）

编辑：我之所以说Chrome / V8是因为Safari使用相同的渲染引擎（WebKit）没有这个问题（尽管它不如Firefox / IE9 / Opera那么流畅）

Answer 1

我将回答我自己的问题，因为我找到了解决方案：

在框上运行此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; };
    });
  });
};

Answer 2

我看到我的电脑没有落后......

无论如何，也许您可以尝试通过使用下划线的throttle函数

来降低事件处理程序的频率

Chrome / V8在某些元素上缓慢onmousemove（）

2 个答案: