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

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;
  
  functionstart() {
    counter = setInterval(function() {
      wrapper.innerHTML = count;
      count++;
    }, 500);
  }
  functionend() {
    clearInterval(counter)
  }

<buttononmousedown="start()"onmouseup="end()">Click and hold</button><pid="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.asphttps://www.w3schools.com/jsref/met_win_clearinterval.asp

Documentation

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setIntervalhttps://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.

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

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 repeatingfunctiondisplay(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 timefunction() {
        console.log("Holding" + (++count) + ", your value: " + value);
        }, 
      1000// Repeat after 1 second.
    );
}

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

Solution 3:

Update on @AnonymousSB answer for touch support:

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