Как я могу уменьшить замедления от события mousemove?

Question

Я использую относительно простую функцию (обновите span innerHTML) на mousemove. Приложение представляет собой карту Leaflet . Когда мышь движется, при масштабировании, панорамировании и загрузке тайлов наблюдается ощутимая задержка. Мне нужно всего лишь обновить span примерно 10-20 раз в секунду. (См. здесь для рассматриваемой страницы; обновление для индикатора X / Z в верхнем правом углу.)

Как лучше всего отложить и / или отложить mousemove вызов событий? Достаточно ли пропустить обновление innerHTML? Могу ли я отменить регистрацию и перерегистрировать событие после тайм-аута?

Answer 1

Изменить текстовый узел диапазона будет гораздо эффективнее, чем модифицировать innerHTML.

function mouseMoveAction(ev) {
    span.firstChild.data = new Date.toString();
}

Но если текстовые узлы не будут удовлетворять требованию, и вам нужен innerHTML при перемещении мыши, вы можете установить пороговое значение в обработчике перемещения мыши.

/* Keep CPUs to a minimum. */
var MOUSE_MOVE_THRESHOLD = 25,
    lastMouseMoveTime = -1;

function mousemoveCallback(ev) {
        var now = +new Date;
        if(now - lastMouseMoveTime < MOUSE_MOVE_THRESHOLD)
            return;
        lastMouseMoveTime = now;
        mouseMoveAction(ev);
}

Избегайте jQuery, et al; они без необходимости делают вещи намного медленнее и добавляют намного больше сложности.

Answer 2

Пользуйтесь указателем мыши, чтобы установить строку innerHTML для переменной, а также используйте прямое простое событие DOM mousemove для элемента, если это возможно. Смотри http://bugs.jquery.com/ticket/4398

!function () {
    var buffer = null;

    elem.onmousemove = function () {
        buffer = value;
    };

    !function k() {
        if (buffer) {
            span.innerHTML = buffer;
            buffer = null;
        }
        setTimeout(k, 100);
    }();

}();

Теперь событие mousemove практически не работает (настройка innerHTML - ОЧЕНЬ много работы), и диапазон обновляется 10 раз в секунду.