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 回答