Question

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

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

Answer 1

修改跨度的文本节点将比修改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等;他们不必要地使事情变得更慢并且增加了更多的复杂性。

Answer 2

让mousemove将innerHTML字符串设置为变量，并在可行的情况下对元素使用直接纯DOM鼠标移动事件。见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是很多工作btw）并且跨度每秒更新10次。

如何减少mousemove事件的减速？

2 个答案: