Javascript mousemove事件隊列

在Javascript中，是否有可能在mousemove事件處理程序中確定隊列中是否存在任何掛起的mousemove事件？Javascript mousemove事件隊列

或者，最好能讓事件隊列跳過隊列中除最近一個之外的所有mousemove事件嗎？

我使用鼠標移動&其他鼠標事件，以允許用戶在屏幕上拖動周圍的元素，我不需要浪費CPU & GPU週期重繪上的每個鼠標移動事件已拖動項（其中我更新頂部&左CSS屬性），只要我可以快速跳過中間事件。

我的網站目前沒有遇到任何性能或可視化問題;我只是想讓我的JavaScript儘可能高效。

2013-02-19 XDR

定義「重繪」。它只是設置'left' /'top'屬性，還是涉及更多？ – 2013-02-19 00:18:08

我認爲有更多有趣的方法來解決您的問題比檢查事件隊列。這種代碼真的很難做到。設置一個計時器比較容易，只有在1/10秒的時間內才能重畫。如果您需要減少硬件上的負載，請花費更長的時間，但他們表示人們可以將事件間隔時間縮短到1/10秒。因此，更頻繁地重畫是大多數人無法察覺的事情（儘管有些人可能會看到閃爍的效果）。 – 2013-02-19 00:21:43

@CrescentFresh：是的，重繪只是'left' /'top'屬性。 – XDR 2013-02-19 02:46:28

使用事件清除。 This small throttle/debounce library適用於或不適用jQuery。

例子：

function someCallback() { 
    // snip 
} 

// don't fire more than 10 times per second 
var debouncedCallback = Cowboy.debounce(100, someCallback); 
document.getElementById('some-id').addEventListener('mousemove', debouncedCallback);

來源

2013-02-19 00:18:27

你可以跟蹤您處理的鼠標移動是最後一次，然後跳過當前，如果是太快了。

例如：

elem.onmousemove = function() { 
    var lastcalled = arguments.callee.lastCallTime || 0, 
     now = new Date().getTime(); 
    if(now-lastcalled < 250) return; 
    arguments.callee.lastCallTime = now; 
    // rest of code here 
};

來源

2013-02-19 00:19:28

Javascript mousemove事件隊列

回答

相關問題