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

Question

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

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

我没有使用JQuery或任何其他库，但这是核心上的示例： 的＆GT;＆GT; fiddle＆lt;＆lt;

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

由于某些原因，这种情况最常发生在缓慢移动时。 （也许它完全可以做到 时间，但快速运动，它并不明显。）

我在执行x，y的简单移动时看到了这个效果，但并不常见。

问题是导致这种情况的原因，并希望如何解决。

我试图添加一个时间检查，如上一次 mousemove -event是例如10毫秒前什么也没做。没有更好的。

还尝试将元素的定位置于超时中，如下所示：

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

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

这在我测试的浏览器的Mozilla Firefox中最为明显。歌剧 绝对是最顺利的。

---

修改 的

添加了一个简单的

 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。

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

Answer 1

没有办法处理客户端延迟情况。但是，我建议简单插值] x | y [coordinates。

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

1. 启动间隔捕获缓存] x | y [coordinates（by 2。）
2. 启动捕获] x | y [coordinates。
的间隔

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

高级提案：



而 n 是插值的程度。通常对于您的应用程序，值为4 | 7 [适当。

至于异常值检测，我建议使用基本的 Grubbs'测试离群值 或 Stahel-Donoho Outlyingness < /强>