HTML Button- When Hold The Button It Will Repeat The Action

January 27, 2023 Post a Comment

I'm new to HTML and I'm working on a project that is required to use a button when you pressed and hold it, it would repeat the same action. This is the code I got sofar but did no

Solution 1:

What you need is setInterval and clearInterval.

Code

var wrapper = document.getElementById('counter');
  var counter;
  var count = 0;
  
  function start() {
    counter = setInterval(function() {
      wrapper.innerHTML = count;
      count++;
    }, 500);
  }
  function end() {
    clearInterval(counter)
  }

<button onmousedown="start()" onmouseup="end()">Click and hold</button>
<p id="counter"></p>

Explanation

If you're not familiar with setInterval and clearInterval, they are similar to setTimeout. You can assign setInterval to a variable that you can pass to clearInterval later to stop it. What this does is it puts the code you pass into it on a different stack, so your other code can continue to execute, such as an onmouseup event that can clear it.

Practice

https://www.w3schools.com/jsref/met_win_setinterval.asp https://www.w3schools.com/jsref/met_win_clearinterval.asp

Documentation

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval

Solution 2:

It depends on your context (synchronize/asynchronize processing). You can use setInterval function or “self-calling” function (recursion) or combine both. But make sure that you have to process to clear it when it is not used anymore. If not, it will effect to your app performance.

For setInterval, it will run asynchronize and multi your actions can process at the same time. So, you need to process to keep your data always true. This is the most important.

For “self-calling” function, you can process repeat action in synchronize.

https://javascript.info/recursion

Below is simple example about using setInterval function. Hope that help.

var repeatId; // Keep ID value to we clear repeating.
var count = 0; // Count to see the number of times of repeating

function display(value){
        console.log("Start...");

    // Initialize repeating and keep ID value to use when we want to clear repeating
    repeatId = setInterval(
      // This function will be invoked after a period time
        function() {
        console.log("Holding" + (++count) + ", your value: " + value);
        }, 
      1000 // Repeat after 1 second.
    );
}

function stop(){
    clearInterval(repeatId);// Clear repeating
    count = 0;
    console.log("Stop");
}

Solution 3:

Update on @AnonymousSB answer for touch support:

//repeat on btn hold
let btnHoldCounter;
["mousedown", "touchstart"].forEach(event => {
    back_btn.addEventListener(event, () => {
        btnHoldCounter= setInterval(
             %ExecuteMe%
        , 200);
    });
});
["mouseup", "touchend"].forEach(event => {
    back_btn.addEventListener(event, () => {
        clearInterval(btnHoldCounter);
    });
});

Html5 Website