如何減少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事件的減速？

回答

相關問題