如何减少 mousemove 事件的减速？答案

【问题标题】：How can I reduce slowdowns from mousemove event?如何减少 mousemove 事件的减速？
【发布时间】：2012-01-11 16:39:29
【问题描述】：

我正在mousemove 上运行一个相对简单的功能（更新span 的innerHTML）。该应用程序是一个Leaflet 地图。当鼠标移动时，缩放、平移和加载图块时存在明显的滞后。我最多只需要每秒更新span 10-20 次。（相关页面请参见here；更新是针对右上角的 X/Z 指示器。）

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

【问题讨论】：

标签： javascript dom-events mousemove

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

【讨论】：

【解决方案2】：

让 mousemove 将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 是很多工作）并且 span 每秒更新 10 次。

【讨论】：

谢谢！我正在使用 Leaflet 的L.Map.on() 来绑定事件，它没有使用 jQuery，所以我认为它已经使用了 DOM 事件。同步是否会成为这种方法的问题，还是 Javascript 能很好地解决这个问题？ function k() 之前的 ! 有什么作用？
@HenryMerriam 执行 function k(){}() 是语法错误，因为它被解析为函数声明，而 !function k(){}() 被解析为表达式，因此它可以工作。我很确定 map.on 在幕后使用 jQuery。
Nvm 我挖掘了源代码，他们使用自己的事件实现，所以我猜这很好。