如何减少 mousemove 事件导致的速度减慢？

Question

我正在运行一个相对简单的函数（更新 aspan的innerHTML）mousemove。该应用程序是一个传单地图。当鼠标移动时，缩放、平移和加载图块时会出现明显的滞后。span我最多只需要每秒更新大约10-20次。（请参阅此处查看相关页面；更新针对右上角的 X/Z 指示器。）

延迟和/或推迟事件调用的最佳方法是什么mousemove？跳过更新就足够了吗innerHTML？我可以在超时后取消注册并重新注册该事件吗？

Answer 1

修改span的文本节点会比修改innerHTML效率高很多。

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

但是，如果文本节点不能满足要求，并且您需要在 mousemove 上使用 innerHTML，则可以在 mousemove 处理程序中使用阈值。

/* 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 等；它们不必要地使事情变得更慢并且增加了更多的复杂性。