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事件队列

回答

相关问题