如何减少mousemove事件的减速？

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

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

来源

2012-01-11 Henry Merriam

让mousemove将innerHTML字符串设置为一个变量，并且如果可行的话还在该元素上使用直接的纯DOM 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是工作很多BTW）和量程更新每秒10次。

来源

2012-01-11 16:52:35 Esailija

谢谢！我使用Leaflet的'L.Map.on（）'来绑定事件，它不使用jQuery，所以我认为它已经使用了DOM事件。同步会是这个方法的问题，还是JavaScript处理好这个问题？函数k（）'之前的'！'做什么？ – 2012-01-11 16:58:40

@HenryMerriam函数k（）{}（）'是一个语法错误，因为它被解析为函数声明，而'！k（）{}（）'被解析为一个表达式，因此它可以工作。我非常确定'map.on'在窗帘后面使用了jQuery。 – Esailija 2012-01-11 17:00:40

Nvm我通过源代码挖掘，他们使用自己的事件实现，所以这很好，我猜。 – Esailija 2012-01-11 17:11:12

修改跨度的文本节点比修改innerHTML效率高得多。

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

但是，如果文本节点将不能满足这个要求，你需要的innerHTML在鼠标移动，你可以在鼠标移动处理的阈值。

/* 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，等;他们毫无必要地让事情变得更慢，并增加了更多的复杂性。

来源

2012-01-11 22:43:58 Garrett

如何减少mousemove事件的减速？

回答

相关问题