在javascript中开始和结束函数
Starting and ending functions in javascript
我正在玩一段简短的代码,看看我是否可以让一个函数在用户按住鼠标时运行,然后在他们抬起鼠标时结束它。对于这个例子,我试图增加一个数字,当用户按住按钮移动鼠标时,我在屏幕上显示这个数字。我希望它冻结并停止一旦他们释放按钮,然而计数器只是重置和计数继续从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有很多方法来实现这一点——你最终决定什么取决于你真正想用它做什么。
- 在另一个函数成功结束后调用该函数
- 在动画结束之前调用函数
- settimeout调用的函数未结束
- 如何在Javascript中设置函数在上一次结束时启动
- 当*ngFor以角度2结束时执行函数
- 函数1结束后,JavaScript调用函数2
- Javascript渲染.如何编写Javascript;t在函数调用结束之前继续执行代码
- Javascript”;结束”;函数工作不稳定
- 在 html5 视频结束时调用 AngularJS 控制器函数
- 在 jquery 移动中离开页面时结束 SetInterval 函数
- addclass循环结束时调用函数
- 为什么使用与输入参数具有相同结束参数的函数来编写Javascript
- 调用并结束ajax函数
- 结束函数(如果$thisPage等于特定页面)
- 在触发事件后结束函数(带返回)
- For循环提前结束函数
- Node.js AWS S3上传从不调用结束函数
- Jquery检测何时结束函数并重复
- 在javascript中开始和结束函数
- Javascript: timeupdate结束函数