javascript - JavaScript 中的开始和结束函数

Question

我正在使用一段简短的代码，看看是否可以在用户按下鼠标时运行一个函数，然后在用户抬起鼠标时结束该函数。对于此示例，我尝试在用户按住按钮的同时移动鼠标时增加屏幕上显示的数字。我希望一旦他们释放按钮它就卡住并停止，但是计数器只是重置并且计数从 0 继续，即使按钮没有被按下...

function dragInit(state, e) {
    var i = 0;
    $(document).on("mousemove", function() {
        if (state) {
            i+=1;
            $('#debug').text(i); //Show the value in a div
        }
    });
}

$(document).ready(function() {

$(document).on(
    {mousedown: function(e) {
        var state = true;
        dragInit(e, state);
    },
    mouseup: function(e) {
        var state = false;
        dragInit(e, state);
    }
    });
});

顺便说一句，有没有办法可以在屏幕上显示变量是真还是假？当我尝试时，它只显示[object Object]。

Answer 1

你的代码中有很多错误。我建议您在开始使用 jQuery 之前阅读更多基本概念。

在 mouseup 和 mousedown 事件绑定(bind)上，传递给 dragInit() 的参数顺序都是错误的。

计数器重新启动的原因是因为变量 i 是本地变量，因此它仅在声明它的函数上下文期间存在。

您对状态变量犯了同样的错误，但在这种情况下完全没有必要声明它。

考虑使您的计数器成为全局计数器(尽管这不是一个好的做法)。

我无法向您提供代码，因为我正在通过手机接听。解决方案是创建一个 mousemove 事件，在递增计数器之前检查是否按下了鼠标按钮。

希望有帮助