Question

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

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

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

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

Answer 1

使用事件去抖动。无论是否使用jQuery，This small throttle/debounce library都能正常运行。

示例：

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

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

Javascript mousemove事件队列

2 个答案: