如何减少mousemove事件的减速？ [英] How can I reduce slowdowns from mousemove event?

问题描述

我在<$ c $上运行一个相对简单的功能（更新 span 的 innerHTML ） C>鼠标移动。该应用程序是 Leaflet 地图。当鼠标移动时，在缩放，平移和加载图块时会出现明显的延迟。我只需要每秒最多更新 span 大约10-20次。 （有关相关页面，请参见此处;更新适用于上层的X / Z指示器 - 右上角。）

I'm running a relatively simple function (update a span's innerHTML) on mousemove. The application is a Leaflet map. When the mouse is moving, there is palpable lag when zooming, panning and loading tiles. I only need to update the span about 10-20 times per second at most. (See here for the page in question; the update is for the X/Z indicator in the upper-right corner.)

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

What's the best way to delay and/or defer mousemove event calls? Is it good enough to skip updating innerHTML? Can I unregister and re-register the event after a timeout?

推荐答案

让mousemove设置 innerHTML 变量的字符串，如果可行的话，还在元素上使用直接的纯DOM mousemove事件。请参阅 http://bugs.jquery.com/ticket/4398

Have the mousemove set the innerHTML string to a variable and also use a direct plain DOM mousemove event on the element if feasible. See 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次。

Now the mousemove event hardly does any work (setting innerHTML is A LOT of work btw) and the span is updated 10 times per second.

这篇关于如何减少mousemove事件的减速？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！