在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之前阅读更多基本概念。

dragInit()和mouseup事件绑定传递给mousedown的参数顺序错误。

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

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

考虑让你的计数器成为全球性的（尽管这不是一个好习惯）。

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

希望我帮助

Answer 2

你可以这样做：

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

// Create an object to track event variables
var eventState = {
    count:0, //replaces your previous 'i' variable
    state: false //keeps track of mouseup or mousedown
};

$(document).ready(function () {

    $(document).on({
        mousedown: function (e) {
            eventState.state = true;
            dragInit(); //don't need to pass anything anymore
        },
        mouseup: function (e) {
            eventState.state = false;
            dragInit(); //don't need to pass anything anymore
        }
    });
});

jsFiddle

或者将所有内容保持为一个对象

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

    $(document).on({
        mousedown: function (e) {
            state = true;
            action(); //don't need to pass anything anymore
        },
        mouseup: function (e) {
            state = false;
            action(); //don't need to pass anything anymore
        }
    });
}

$(document).ready(function () {
    var obj = new dragInit();
});

jsFiddle 2

回复评论的示例

jsFiddle：这说明了以下代码片段在执行方面存在差异的原因。

// Works
$(document).on("mousemove", function () {
    if (state) {

    }
})

// Doesn't
if (state) {
    $(document).on("mousemove", function () {

    });
}

Answer 3

少了代码，你只需要这个。

使用jquery和Off打开和关闭mousemove事件。

计数器重置http://jsfiddle.net/kRtEk/

$(document).ready(function () {
    var i = 0;
    $(document).on({
        mousedown: function (e) {

            $(document).on("mousemove", function () {

                $('#debug').text(i++); //Show the value in a div
            });

        },
        mouseup: function (e) {
            i = 0;
            $('#debug').text(i);
            $(document).off("mousemove");
        }
    });
});

W / O重置http://jsfiddle.net/gumwj/

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

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

WithNoCounter http://jsfiddle.net/F3ESx/

$(document).ready(function () {

    $(document).on({
        mousedown: function (e) {
             $(document).on("mousemove", function () {
              $('#debug').data('idx',parseInt($('#debug').data('idx')|0)+1).text($('#debug').data('idx')); //Show the value in a div
            });

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

Answer 4

假设你与Jquery结婚（没有错） - 检查并考虑完全重新思考你的方法，利用“.one（）”（http://api.jquery.com/one/）方法。

编辑：如果这种味道不合适 - 熟悉“延迟”对象（http://api.jquery.com/category/deferred-object/）

通过jquery来解决这个问题的方法很多 - 你最终决定了什么取决于你真正打算用它做什么。