SetInterval loop relatively confusing to me

Question

HTML

<div id="backspace" ng-click="deleteString(''); decrementCursor();">

JS

<script>
    $scope.deleteString = function() {
        if($scope.cursorPosVal > 0){
            //$scope.name = $scope.name - letter;
            $scope.name = [$scope.name.slice(0, $scope.cursorPosVal - 1) + $scope.name.slice($scope.cursorPosVal)].join('');
            console.log($scope.name);
            setTimeout(function(){ setCaretPosition("inputBox", $scope.cursorPosVal); }, 30);
        } else {
            $scope.cursorPosVal = 1;
        }
    };
</script>

I am designing an on screen touchscreen keyboard. This is my backspace button. I am going to make it so that when you click and hold the backspace button, it starts removing characters automatically. I don't know where to begin with creating a setInterval, and I know a setInterval is exactly what I need to use here.

Any errors? I'm still not sure what you exatcly want; please provide further explanation — lockedz, Jul 23 '15 at 20:48

score 3 · Answer 1 · answered Jul 23 '15 at 20:57

3

If I'm not wrong, you want that while you're keeping your button pressed, a function repeats itself.

You're right with setInterval(). However, the way you manage the event is wrong.

Take a look at this fiddle (It's not your code, but a simple example is the best way to understand):

http://jsfiddle.net/daq9atdd/1/

$(function(){
    var interval = null;

    $('#myButton').mousedown(function(){
        interval = setInterval(function(){
            console.log('Hello !');
        }, 250);
    });

    $('#myButton').mouseup(function(){
        clearInterval(interval);
    });
});

I start the interval when the button is pressed, store it, and clear it when the button is released.

answered Jul 23 '15 at 20:57

nioKi

1,259
9
17

Great example, but I am not using jQuery, (can't tbh.) – abejdaniels Jul 23 '15 at 21:02
If downvoting people could at least help me improve my answer, I'd gladly read their advice : ) – nioKi Jul 23 '15 at 21:18
1

Perhaps someone downvoted because your answer doesn’t directly involve AngularJS. The biggest hurdle is where to put the code—in AngularJS you probably should have this inside a directive, and it’s slightly non-obvious how to write directives. Other than that your answer is valid (have an upvote), except I personally prefer setting timeouts instead of intervals. :) – Anton Strogonoff Jul 23 '15 at 22:28
@abejdaniels, if you’re using AngularJS you’re already using jQuery, or at least its ‘lite’ version (which supports significant part of jQuery API). See [``angular.element``](https://docs.angularjs.org/api/ng/function/angular.element). – Anton Strogonoff Jul 23 '15 at 22:31

score 2 · Answer 2 · edited May 23 '17 at 10:34

You’re so sure about setInterval.

If browser briefly hangs for whatever reason (say some background task), setInterval would go on queueing your backspace calls until it has some CPU time. This means user may see no change and hold backspace longer than needed, and then see a whole bunch of characters suddenly vanish when browser is back to normal.

Thus by setting a timeout after every call you’re making sure user won’t remove more characters than needed. Might be important if the goal is to improve UX.

Example implementation with AngularJS directives and setTimeout

SetInterval loop relatively confusing to me

2 Answers2