I find the SetInterval loop to be quite perplexing

Question

I find the SetInterval loop to be quite perplexing

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 in the process of developing an on-screen touchscreen keyboard. My current focus is on the backspace button functionality. I aim to implement a feature where holding down the backspace button will automatically delete characters. To achieve this, I need to incorporate setInterval into my codebase, which presents a new challenge for me.

javascript html css angularjs

Answer 1

Answer №1

It seems like you're looking to have a function repeat itself while a button is kept pressed.

Using setInterval() is the right way to go, but you might need to adjust how you handle the event.

You can refer to this simple example on JSFiddle for a clearer understanding:

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

$(function(){
    var interval = null;

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

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

In this code snippet, the interval starts when the button is pressed, pauses it and resets it once the button is released.

Answer 2

It seems like you're looking to have a function repeat itself while a button is kept pressed.

Using setInterval() is the right way to go, but you might need to adjust how you handle the event.

You can refer to this simple example on JSFiddle for a clearer understanding:

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

$(function(){
    var interval = null;

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

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

In this code snippet, the interval starts when the button is pressed, pauses it and resets it once the button is released.

Answer 3

Answer №2

You seem confident in your use of setInterval.

In the event that the browser experiences a brief hang (such as due to a background task), setInterval will continue queuing backspace calls until it regains CPU time. This could result in the user not seeing any immediate changes and holding the backspace key longer than necessary, leading to a sudden removal of multiple characters when the browser resumes normal operation.

By implementing a timeout after each call, you ensure that the user does not inadvertently delete more characters than intended. This can be crucial for enhancing the overall user experience.

Check out this example using AngularJS directives and setTimeout

For further reference:

Deciding between setTimeout or setInterval
Updated fiddle by noKid with setTimeout consideration

Answer 4

You seem confident in your use of setInterval.

In the event that the browser experiences a brief hang (such as due to a background task), setInterval will continue queuing backspace calls until it regains CPU time. This could result in the user not seeing any immediate changes and holding the backspace key longer than necessary, leading to a sudden removal of multiple characters when the browser resumes normal operation.

By implementing a timeout after each call, you ensure that the user does not inadvertently delete more characters than intended. This can be crucial for enhancing the overall user experience.

Check out this example using AngularJS directives and setTimeout

For further reference:

Deciding between setTimeout or setInterval
Updated fiddle by noKid with setTimeout consideration

I find the SetInterval loop to be quite perplexing

Answer №1

Answer №2

Similar questions

Create dynamic automatic titles in HTML with JavaScript

How can CSS be utilized to style the visited links that are hovered over

Can a new EJS file be generated using the existing file as a template?

Struggling to connect HTML elements with AngularJS and TinyMCE?

Having trouble understanding why getStaticProps function is not loading before the main exported function

How can I efficiently fetch data from Firebase, manipulate it through computations, and present it using React Hooks?

What is the best way to transform HeadersInit into an Object<string,string> data type?

Rotation of Weekly Menus

Removing nested divs using JavaScript

Tips for ensuring that Breadcrumbs are displayed properly with the noWrap feature

Adding Node Modules during the setup of an ElectronJS application

Anticipating outcome: row 1 column 1 (character 0) in Python

Breaking free of the constraints of a 100% height container, UL escapes its

Experiencing difficulties launching my Server.JS due to a listening error

Having trouble configuring bcryptjs in a React.js project

AngularJS dynamic and wildcard routing strategy is a powerful feature that allows for flexible and customizable navigation within web applications

AngularJS uses variables defined by using curly braces like {{"message"}}

Tips for extracting text from a multiline tag using Selenium

When using the GET method to load a PHP file via AJAX, the page may not display certain jQuery plugins even after the file

Issue with VueJS instance: Unable to prevent default behavior of an event