My goal is to create a button that can be pressed once to execute a single command, but also has the capability to hold the button down and execute the command multiple times while still holding it. I am working with AngularJs (though I don't believe this is related to the issue).
This is what I have attempted so far:
<button type="button"
class="btn btn-default"
ng-click="ChangeSetPoint('Up')"
ng-mousedown="startLoopingUp()"
ng-mouseup="stopLoopingUp()"
ng-mouseleave="stopLoopingUp()">
+
</button>
and in the controller:
$scope.ChangeSetPoint = function(direction){
//Code to change the setpoint
}
var looping = false;
var promise;
$scope.startLoopingUp = function(){
looping = true;
promise = setTimeout(loop('Up'),1000);
}
var loop = function(direction){
$scope.ChangeSetPoint(direction);
if(looping){
promise = setTimeout(loop(direction),300)
}
}
$scope.stopLoopingUp = function(){
looping = false;
clearTimeout(promise);
}
Initially, everything was functioning until I introduced the 'direction' parameter. Previously, I utilized arguments.callee in setTimeout, but upon researching how to pass an argument with that function, I discovered that the use of arguments.callee is discouraged (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee). Since then, I have been encountering 'Maximum call stack size exceeded' errors.