Mousemoveイベントからの減速を減らすにはどうすればよいですか？

Question

比較的単純な関数を実行しています（更新a span's innerHTML） の上 mousemove. 。アプリケーションはaです リーフレット 地図。マウスが動いているとき、タイルをズーム、パン、ロードするときに触知可能な遅れがあります。更新するだけです span せいぜい1秒あたり約10〜20回。 （見る ここ 問題のページの場合。更新は、右上隅のX/Zインジケーター用です。）

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

Answer 1

Mousemoveを設定してもらいます innerHTML 変数への文字列、また、実行可能な場合は、要素に直接プレーンドムマウスモーブイベントを使用します。見る 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イベントはほとんど作業を行いません（内側のHTMLの設定は多くの作業です）、スパンは毎秒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などを避けてください。彼らは不必要に物事をずっと遅くし、もっと複雑にします。