在javascript中开始和结束函数

Starting and ending functions in javascript

本文关键字：结束 函数 开始 javascript      更新时间：2023-09-26

我正在玩一段简短的代码，看看我是否可以让一个函数在用户按住鼠标时运行，然后在他们抬起鼠标时结束它。对于这个例子，我试图增加一个数字，当用户按住按钮移动鼠标时，我在屏幕上显示这个数字。我希望它冻结并停止一旦他们释放按钮，然而计数器只是重置和计数继续从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]。

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

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

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

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

考虑将你的计数器设置为全局的(尽管这不是一个好的做法)。

我不能提供你的代码，因为我正在从我的电话接听。一个解决方案是创建一个mousemove事件，在增加计数器之前检查鼠标按钮是否被按下。

希望我有所帮助

你可以这样做:

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 () {
    });
}

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

使用jquery on和Off来打开和关闭鼠标移动事件。

Counter Reset 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");
        }
    });
});

假设您已经与Jquery结缘(这没什么错)-检查并考虑完全重新考虑利用".one()"的方法。(http://api.jquery.com/one/)方法。

编辑:如果感觉不舒服——熟悉一下"deferred"对象(http://api.jquery.com/category/deferred-object/)

通过jquery有很多方法来实现这一点——你最终决定什么取决于你真正想用它做什么。

相关文章：