4

マウスの移動速度を出力するための小さなスクリプトを作成しました。私が抱えている問題は、スクリプトが数字の中で不正確な数字を出力し、すべてを台無しにすることがあるということです。また、ユーザーがマウス ボタンを離したときに、スクリプトが常に終了するとは限りません。最初の問題を解決するには、おそらく値を配列に配置してから外れ値を特定できると思いますが、ここの誰かが、私が愚かなことをしていて、コードを修正して作成する方法があることを教えてくれることを願っていますより効率的です。

JS:

var test_obj = {
    mouse_coors: function(x2) {

        $(document).on("mousemove", function(e) {
            var x = e.clientX,
            velocity = Math.abs(x-x2);

            console.log(velocity);
            $(document).off("mousemove");

            setTimeout(function() {
                x2 = e.clientX;
                test_obj.mouse_coors(x2);
            }, 100);
        });

        $(document).on("mouseup", function() {
            $(document).off("mouseup").off("mousemove");
        });
    },
};


$(document).ready(function() {

    $('#testbox').on("mousedown", function() {
        test_obj.mouse_coors(0);
    });

});

HTML:

JSfiddle: http://jsfiddle.net/mkb2t/

4

1 に答える 1

14

それは単にマウスの速度ではないからです。現在数えているのは、マウスが x 方向に移動した距離です。それは距離と呼ばれます。

発生する不正確さは、y 方向を無視することと、タイムスタンプをsetTimeout使用することの不正確さの両方に起因する可能性があります。Date

また、mousemoveハンドラーのカスケードを構築しています (これは間違っているだけでなく、効率的にも悪いです)。すべてのイベントで (かなり頻繁に!) 0.1 秒待ってから、最初のイベント以降のマウスの移動距離をすべてのイベントで出力する新しいリスナーを追加します。別の問題は、マウスが押されたときのmouse_coors値で関数を呼び出しているにもかかわらず、マウスがほとんど存在しないことです。0

より良い: マウスの現在の座標をグローバルに保存します。それらを更新するたびに、差を計算し、最後の更新から経過した時間で割ります。次に、速度を記録します。

function makeVelocityCalculator(e_init, callback) {
    var x = e_init.clientX,
        y = e_init.clientY,
        t = Date.now();
    return function(e) {
        var new_x = e.clientX,
            new_y = e.clientY,
            new_t = Date.now();
        var x_dist = new_x - x,
            y_dist = new_y - y,
            interval = new_t - t;
        var velocity = Math.sqrt(x_dist*x_dist+y_dist*y_dist)/interval;
        callback(velocity);
        // update values:
        x = new_x;
        y = new_y;
        t = new_t;
    };
}
$(document).ready(function() {
    $('#testbox').on("mousedown", function(e) {
        var log = makeVelocityCalculator(e, function(v) {
            console.log(v+"pixel/ms");
        });
        $(document).on("mousemove", log).one("mouseup", function(){
            $(document).off("mousemove", log);
        });
    });
});

更新されたフィドル

于 2013-07-07T20:46:26.640 に答える