js角度按钮保持循环失败
js angular button hold loop failing
我需要一个可以按下一次来执行单个命令的按钮。但也可以按住按钮并在按住按钮的同时多次执行命令。我正在使用AngularJs(尽管我认为这与问题无关)
到目前为止我拥有的:
<button type="button"
class="btn btn-default"
ng-click="ChangeSetPoint('Up')"
ng-mousedown="startLoopingUp()"
ng-mouseup="stopLoopingUp()"
ng-mouseleave="stopLoopingUp()">
+
</button>
在控制器中:
$scope.ChangeSetPoint = function(direction){
//Stuff to actually change the setpoint
}
var looping = false;
var promis;
$scope.startLoopingUp = function(){
looping = true;
promis = setTimeout(loop('Up'),1000);
}
var loop = function(direction){
$scope.ChangeSetPoint(direction);
if(looping){
promis = setTimeout(loop(direction),300)
}
}
$scope.stopLoopingUp = function(){
looping = false;
clearTimeout(promis);
}
在我使用这个"方向"参数之前,它就已经起作用了。在setTimeout中使用arguments.callee之前,但当我研究如何使用该函数传递参数时,我注意到不鼓励使用arguments.callee
(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee)。从那以后,我收到了"超过最大调用堆栈大小"的错误。
我不久前在一个指令中使用了以下函数。我创建它时考虑到了以下几点:
该函数可能包含三个独立的回调函数。单击一下就会调用"short"回调。按住该按钮时,会重复调用短回调。当仍然按下按钮时,"长"回调会重复触发。最后,当用户停止按下时,将触发第三个"最终"回调。
这可能不是你问题的确切解决方案,但也许它会给你一些启发和帮助:)祝你好运。
/**
*
* @param {Event} evt
* @param {Function} shortCallback
* @param {Function} longCallback
* @param {Function} [finishCallback] optional
*/
var onBtnClick = function (evt, shortCallback, longCallback, finishCallback) {
//prevent mobile browser from long tap behaviour (simulated right click)
evt.preventDefault();
//only react to left mouse button or a touch event
if (evt.which === 1 || evt.type === "touchstart") {
//save 'this' context and interval/timeout IDs
var self = this,
short = {
timeout : null,
interval : null,
callback : angular.isFunction(shortCallback) ? shortCallback : angular.noop
},
long = {
timeout : null,
interval : null,
callback : angular.isFunction(longCallback) ? longCallback : short.callback
},
listener = "mouseup mouseleave touchend touchcancel",
//
cancelShort = function () {
$timeout.cancel(short.timeout);
$interval.cancel(short.interval);
},
//
cancelLong = function () {
$timeout.cancel(long.timeout);
$interval.cancel(long.interval);
};
//react to a single click
short.callback();
//when user leaves the button cancel timeout/interval, lose focus and unbind recently bound listeners
self.one(listener, function (e) {
e.preventDefault();
cancelShort();
cancelLong();
if (angular.isFunction(finishCallback)) {
finishCallback();
}
self.blur();
});
//on a long click call the callback function within an interval for faster value changing
short.timeout = $timeout(function () {
short.interval = $interval(short.callback, 50, 0, false);
}, 300, false);
//when pressed even longer, cancel previous callback and fire "long" one
long.timeout = $timeout(function () {
cancelShort();
long.interval = $interval(long.callback, 50, 0, false);
}, 1500, false);
}
};
此函数已绑定到具有以下内容的元素:
/**
*
* @param {String} selector
* @param {Function} clickCallback
* @param {Function} fastCallback
* @param {Function} [finishCallback] optional
*/
var bindEvent = function (selector, clickCallback, fastCallback, finishCallback) {
$element.on("mousedown touchstart", selector, function (evt) {
onBtnClick.call($(this), evt, clickCallback, fastCallback, finishCallback);
});
};
这是造成伤害的参数:
更改时
setTimeout(loop, 1000)
至setTimeout(loop('Up'), 1000)
我并没有将函数作为参数,而是执行函数并将返回作为参数。
我应该做:
promis = setTimeout(function(){ loop('Up') },1000);
相关文章:
- 在window.print()中加载为循环指令而编译时准备DOM失败
- js角度按钮保持循环失败
- 在for循环中使用setTimeout失败
- 循环遍历所有字段,如果任何一个字段的验证失败jquery,则返回false
- 循环遍历 ArrayController 失败,因为它不是数组,即使控制器具有正确的数据模型也是如此
- 断言失败:#each 循环的值必须是数组余烬 js
- javascript:将键从for循环传递到另一个函数失败
- 循环通过函数会导致错误,并在第一次更改时失败
- 循环使用Ajax的函数.仅在IE中失败.其他浏览器都能正常工作
- 在所有跨度上循环并更新一个失败的whit JQuery
- Javascript正则表达式失败(循环?)
- Javascript和JSON.子数组循环失败
- 我的for循环内输出分叉失败
- Insertbefore()在循环中只添加第一行,在其他行上失败
- jQuery animate()在setTimeout()循环后失败
- Foreach循环javascript失败
- file_put_contents上的循环偶尔会触发“打开流失败”.警告
- Javascript和JQuery UI的while循环失败
- 在javascript中执行for循环失败
- Handlebars.js中有多个循环失败