如何用純JavaScript獲得10毫秒的舊鼠標位置？

我正在製作一個滑塊，當它向左滑動時向左移動，向右滑動時向右滑動。她是我迄今爲止取得的成績https://jsfiddle.net/6ze720f7/。儘管我現在可以將左側的位置設置爲左側：顯示左側時爲0，位置爲左側時：顯示右側時爲446像素。如何用純JavaScript獲得10毫秒的舊鼠標位置？

，是以方向護理的代碼是：

center.onmousemove = function(Dmove) { 
if (Dmove.pageX < oldx) { 
    direction = "left" 
} else if (Dmove.pageX > oldx) { 
    direction = "right" 
} 

oldx = Dmove.pageX; 
}

我所擔心的是，oldx和Dmove.pageX之間的差別是非常非常小的，更精確地在執行拍攝的時間量幾行javascript代碼。所以如果div被刷到左邊1秒，但最後它會錯誤地向右移動幾毫秒，然後div將被刷到右邊。我認爲的解決方案是使用舊版本的10年前的oldx。

是否有可能找到10毫秒的舊值比目前的Dmove.pageX？
是否可以給同步延遲10毫秒之後的語句oldx = Dmove.pageX;？
是否可以使用setInterval()函數以便在每10秒鐘後設置值oldx？這可能有點問題，因爲oldx與當前值Dmove.pageX之間的差異可以在事件發生時在0到10毫秒之間取任何值。

來源

2016-05-16 user31782

'10ms'是一個非常短的時間。但是，例如，您可以在每次鼠標移動後設置一個「10ms」超時，以更新「oldx」。使用這個方法你會每秒創建100個超時，這在性能方面並不是很好。再次，'10ms'是一個很短的時間，我認爲你至少應該把它增加到'50ms'。 – Cristy

另一種選擇是將所有鼠標位置及其時間戳保存在隊列中。每當隊列中的第一個項目超過10毫秒時，就從隊列中彈出。在隊列末尾添加新項目。要找到10ms前發生的位置，只需讀取隊列中的第一個值。 – Cristy

@Cristy在每個mousmove事件之後不會設置10ms超時會導致'div'移動的模糊效果？ – user31782

我建議（如果適用於您的情況）採用另一種方法：比較滑動開始時的x位置（即：拖動或mosedown事件的開始）和x位置結束或在滑動過程中（即：mouseup或mousemove事件）。這給：

document.body.onmousedown = function(Dmove) { 
    oldx = Dmove.pageX; 
    ... 
    ... 
}

不要修改oldx其他地方，並比較在onmousedown或onmouseup事件偵聽器「初始」值。

來源

2016-05-16 10:16:04

這是完全擰緊的方法。假設最初的x位置是50.現在我將div滑動到「x = 10」，然後回到「x = 25」。總體來說，x位置下降，但最終用戶想要向右滑動。用你的方法div將向左滑動。 – user31782

@ user31782由於您在每次鼠標移動時更新'oldx'，初始設置只會使mousemove從第一個像素移動更加精確。 –

@ user31782這就是爲什麼我說「如果適用於您的情況」。我的丈夫做了以下工作：1。如果用戶在「x：50」處開始滑動（或拖動），經過「x：10」但不釋放鼠標（或向上移動手指）然後轉到「x：25」，則認爲滑動。 2.另一方面，如果用戶在「x：50」處開始滑動（或拖動），以「x：10」釋放，然後再次滑動到「x：25」，則第二次滑動被認爲是正確的。 –

如何用純JavaScript獲得10毫秒的舊鼠標位置？

回答

相關問題