Javascript mousemove事件队列

Question

In Javascript, is it possible in a mousemove event handler to determine if there are any pending mousemove events in the queue?

Or, preferably, is it possible to make the event queue skip all mousemove events in the queue except for the most recent one?

I'm using mousemove & other mouse events to allow users to drag elements around the screen, and I don't need to waste CPU & GPU cycles redrawing the dragged items on every mousemove event (in which I update the top & left CSS properties), as long as I can skip intermediate events quickly enough.

My site is not currently experiencing any performance or visualization problems; I just want to make my JavaScript as efficient as possible.

Answer 1

Use event debouncing. This small throttle/debounce library works well with or without jQuery.

Example:

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

You could keep track of the last time you handled a mousemove, then skip the current one if it's too soon.

For example:

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