3

这可能已得到回答，但在搜索中找不到任何积极的结果。

拥有一个脚本来使用超出“正常” 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添加console.log(Drag.eint)时 - 当发生运动滞后/停止时 -Drag.int增加 1。永远不会有间隙。如：

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

如果我包括setTimeout()说超时为 10 或 20 的任何一个，则不会。

如果我完全没有抓住重点——请告诉我。

4

1 回答 1

1

没有办法解决客户端滞后的情况。但是，我建议对 ]x|y[ 坐标进行简单插值。

也就是说，您可以执行以下操作：

  1. 启动间隔捕获缓存的 ]x|y[ 坐标（按 2.）
  2. 启动一个间隔来捕获 ]x|y[ 坐标。

现在测试最近k个捕获的异常值坐标（适用于发生跳跃（滞后）的情况）并插值跳跃。

高级提案：

插值，更高程度

而n是插值的程度。通常，对于您的应用程序，]4|7[ 之间的值是合适的。

至于异常值检测，我建议对异常值使用基本的Grubbs 检验或Stahel-Donoho Outlyingness。

于 2013-04-12T12:29:43.697 回答