Javascript mousemove очередь событий

Question

В Javascript возможно ли в обработчике mousemove определить, есть ли какие-либо ожидающие события mousemove в очереди?

Или, желательно, можно ли заставить очередь событий пропускать все события перемещения мыши в очереди, кроме самого последнего?

Я использую mousemove и другие события мыши, чтобы позволить пользователям перетаскивать элементы по экрану, и мне не нужно тратить циклы CPU и GPU, перерисовывая перетаскиваемые элементы в каждом событии mousemove (в котором я обновляю свойства CSS в верхней и левой частях экрана)), пока я могу пропустить промежуточные события достаточно быстро.

Мой сайт в настоящее время не испытывает проблем с производительностью или визуализацией; Я просто хочу сделать мой JavaScript максимально эффективным.

Answer 1

Используйте событие debouncing. Эта небольшая библиотека throttle/debounce хорошо работает с 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);

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