如何通過onMouseMove防止對象移動的跳轉？

Question

_{這可能已被回答，但無法在搜索中找到任何積極的結果。}

有一個腳本走動使用各種額外的計算超出 「正常」 X，Y定位元素。

我沒有使用JQuery或任何其他的庫，但這裏是對核心樣本： >>fiddle < <

眼下的問題是，移動元素時，有時不更新如下： 當指針移動時元素靜止不動，然後出現一個大跳躍。

由於某種原因，這種情況在緩慢移動時經常發生。 （也許它所有的 時間，但在快速移動是不是顯着的。）

我看到這個效果，Y爲好，但不是很經常做做簡單的舉動爲x時。

問題是什麼導致這種情況，並希望如何解決。

我試圖在最後，如果鼠標移動 -event是如加上時間支票10毫秒前，什麼都不做。沒有更好的。

也試圖把元素的定位在超時爲：

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

讓瀏覽器做其他工作，但沒有任何好轉。

這在我測試過的瀏覽器的Mozilla Firefox中最引人注目。 Opera 確切地說是最流暢的。

---

編輯：

添加了一個簡單

console.log('1'); 

而且我注意到，當運動掛日誌還掛起（不記錄）。

它是在446 events，lag，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) - 1。Drag.int增加從未有差距 - 當運動的滯後/停止發生。如：

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

若我包括setTimeout()要麼說 超時10或20

如果我完全缺少點 - 請讓我知道。

Answer 1

無法解決客戶端延遲情況。但是，我提出了一個簡單的插值[x | y]座標。

也就是說，可以執行以下操作：

1. 發起間隔捕獲緩存]×| Y [座標（由2.）
2. 發起的間隔捕獲]×| Y [座標。

現在測試最近ķ捕獲座標離羣值（這適用於其中一個跳躍（滯後）時發生的情況）和內插的跳躍。

高級建議：

而ñ是插值的程度。通常對於您的應用程序，值介於] 4 | 7 [適當。

對於異常值檢測，我建議使用基本格魯布斯測試離羣或斯塔荷爾-Donoho等Outlyingness。