javascript - 如何通过 onMouseMove 防止对象移动时的跳跃？

Question

_{这可能已得到解答，但无法在搜索中找到任何正面结果。}

有一个脚本可以使用各种额外的计算来移动元素“正常” x,y 定位。

我没有使用 JQuery 或任何其他库，但这里有一个核心示例:<强>>> fiddle <<

手头的问题是，当移动元素时，它有时不会更新，如:当指针移动时，元素静止不动，然后出现一个大跳跃。

由于某种原因，这种情况在缓慢移动时最常发生。 (也许它做到了所有时间，但在快速移动时它并不那么明显。)

我在简单移动到 x,y 时也看到了这种效果，但不是那么频繁。

问题是造成这种情况的原因，希望如何解决。

我尝试添加一个时间检查，就好像最后一个 mousemove 事件是例如10 毫秒前什么都不做。没有任何改善。

还尝试将元素的定位放在超时中，如下所示:

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

让浏览器做其他工作，但不会更好。

在我测试过的浏览器中，这在 Mozilla Firefox 中最为明显。歌剧绝对是最流畅的。

---

编辑:

添加了一个简单的

 console.log('1');

而且我注意到，当移动挂起时，日志也会挂起(不记录)。

它与 446 个事件 一样，滞后，447 个事件。

所以它必须站在未触发或类似事件区域的某个地方。

---

编辑:

@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

如果我用 say 包含 setTimeout() 则不会超时 10 或 20。

如果我完全忽略了重点 - 请告诉我。

Answer 1

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

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

1. 启动一个间隔捕获缓存的 ]x|y[ 坐标(以 2 为单位)
2. 启动一个间隔捕获 ]x|y[ 坐标。

现在测试最近 k 捕获的异常值坐标(这适用于发生跳跃(滞后)的情况)并对跳跃进行插值。

高级建议:

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

至于异常值检测，我建议使用基本的Grubbs 异常值检验 或Stahel-Donoho Outlyingness/strong>.