Javascript mousemove 事件队列答案

【问题标题】：Javascript mousemove event queueJavascript mousemove 事件队列
【发布时间】：2013-02-19 00:16:44
【问题描述】：

在 Javascript 中，是否可以在 mousemove 事件处理程序中确定队列中是否有任何挂起的 mousemove 事件？

或者，最好是，是否可以让事件队列跳过队列中的所有 mousemove 事件，除了最近的事件？

我正在使用 mousemove 和其他鼠标事件来允许用户在屏幕上拖动元素，并且我不需要浪费 CPU 和 GPU 周期在每个 mousemove 事件上重绘拖动的项目（在其中我更新顶部 &左 CSS 属性），只要我能足够快地跳过中间事件。

我的网站目前没有遇到任何性能或可视化问题；我只是想让我的 JavaScript 尽可能高效。

【问题讨论】：

定义“重绘”。是只是设置left/top属性，还是涉及更多？
我认为解决问题的方法比检查事件队列更有趣。这种代码真的很难正确。设置一个计时器并仅在例如 1/10 秒过去时才重绘会更容易。如果您需要减少硬件负载，请延长时间，但他们说人们可以检测到相隔 1/10 秒的事件。因此，更频繁地重绘是在做大多数人甚至无法检测到的事情（尽管，闪烁效果可能对某些人来说似乎是可以检测到的）。
@CrescentFresh：是的，重绘只是left/top属性。
第二个估计值的 1/10 取决于您在做什么。需要 1/10 秒的人体运动，比如在田径运动中，对一个人来说是可见的，并且在丢失时是显而易见的。我认为移动鼠标后 1/10 秒的拖动会非常明显。人类语音涉及不到 1/10 秒的各种比特，并且在省略时会很突出。

标签： javascript mousemove eventqueue

【解决方案1】：

使用事件去抖动。 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);

【讨论】：

【解决方案2】：

您可以跟踪上次处理鼠标移动的时间，如果过早则跳过当前的。

例如：

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
};

【讨论】：