mousemoveイベントからの減速をどのように減らすことができますか？

Question

私はmousemoveの比較的単純な関数（spanのを更新しています）を実行しています。アプリケーションはLeafletマップです。マウスが動いているときには、ズーム、パン、タイルの読み込みの際に、ラグが確認できます。最大でも毎秒約10〜20回、spanを更新する必要があります。 （該当するページについては、hereを参照してください;更新は、右上隅のX/Zインジケータ用です）

イベントコールmousemoveを遅延または延期する最良の方法は何ですか？ innerHTMLの更新をスキップするのに十分ですか？タイムアウト後にイベントの登録を解除して再登録することはできますか？

Answer 1

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プロパティを設定すると、ところで、多くの仕事である）とスパンは、毎秒10回更新されて参照してください。

Answer 2

スパンのテキストノードを変更すると、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、et al;彼らは不必要に物事をより遅くし、より複雑にする。