javascript - 如何减少 mousemove 事件造成的减速？

Question

我正在 mousemove 上运行一个相对简单的函数(更新 span 的 innerHTML)。该应用程序是 Leaflet map 。当鼠标移动时，缩放、平移和加载图 block 时会出现明显的滞后。我最多只需要每秒更新 span 大约 10-20 次。 (有关有问题的页面，请参阅 here；更新是针对右上角的 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 等；它们不必要地使事情变得更慢并增加了更多的复杂性。