Question

我做了一个小脚本，用于输出鼠标移动的速度。我遇到的问题是，有时候脚本会在数字中输出一个不准确的数字，然后抛弃整个数据。同样，当用户释放鼠标按钮时，脚本并不总是终止。为了解决第一个问题，我假设我可以将值放入一个数组然后确定异常值，但是我希望这里的某个人可以告诉我我做了一些愚蠢的事情并且有办法解决我的代码使它更有效率。

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/

Answer 1

仅仅因为那不是鼠标的速度。您目前所计算的是鼠标在x方向上移动了多远。这叫做距离。

您遇到的不准确可能源于忽略y方向和setTimeout的不准确性 - 使用Date时间戳。

此外，您正在构建一系列mousemove处理程序（这不仅是错误的，而且效率也很差）。在每个事件（并且它们经常是！）中，您等待0.1秒然后添加一个新的侦听器，该侦听器将从每个事件输出，从那时起第一个事件后鼠标移动了多远。另一个问题是，当您按下鼠标时，您正在调用值mouse_coors的{{1}}函数，但鼠标几乎不会出现。

更好：全局存储鼠标的当前坐标。每当您更新它们时，计算差异并将其除以自上次更新以来经过的时间。然后记录速度。

updated fiddle

精确计算鼠标速度

1 个答案: