How to Execute function repeatedly when the user holds the button?

Question

I am building a Tetris game in javaScript. I am trying to make it playable even on an android phone, so I added four arrow buttons like this:

<button onclick="rightArrow()">→</button>

I have four functions (triggered by keyboard) like this one:

function right () {
 // Move brick to the right 
}

Is there a way to call the right() function again and again when user holds the button until he let it go? I found several similar questions here and elsewhere, but the answers were above my level of javaScript knowledge. I am not using jQuery. My game is here.

@RobertHarvey: hardware keyboards, maybe. But he seems to be talking about html buttons. — Sergio Tulentsev, Feb 18 '18 at 19:37
the key idea is storing the state in a variable and toggling it when different events occur: mouse down and mouse up. — Sidtharthan, Feb 18 '18 at 19:43
Possible duplicate of [listen to mouse hold event on website?](https://stackoverflow.com/questions/18584389/listen-to-mouse-hold-event-on-website) — Battlesquid, Feb 18 '18 at 19:49
@RadekJohn: "I am not using jQuery" - you can still use the idea. On mousedown you start the timer, on mouseup you stop it. The timer does your action every tick. Only I'm not sure how touches are handled in mobile browsers. Is it still mousedown/mouseup? Or touchstart/touchend or something. — Sergio Tulentsev, Feb 18 '18 at 19:55

Michael · Accepted Answer · 2018-02-18T20:11:46.843

I put together a small example of how this can be achieved using the touchstart and touchend events.

let counter = 0
let held = false
let button = document.getElementById('button')

// touch events
button.addEventListener('touchstart', (event) => { held = true })
button.addEventListener('touchend', (event) => { held = false })

// mouse events
button.addEventListener('mousedown', (event) => { held = true })
button.addEventListener('mouseup', (event) => { held = false })

// loop
function animate() {
  document.getElementById('counter').innerHTML = counter
  
  if (held) { counter++ }
  else if (counter > 0) { counter-- }

  window.requestAnimationFrame(animate)
}

animate()

<button id="button">
  Press and hold!
</button>

<div id="counter">
  0
</div>

The key is to set some variable when touchstart happens so we know the user is holding down, until we detect for a touchend event, which signals the user has let go. In a separate loop, we execute code based on this variable. In your case, you could check in your main game loop and then run the move code (be careful that it might execute very frequently; but this can be easily resolved by a timer).

I also added the mousedown and mouseup events, so that this code can work on desktops too, but you can also confirm this works on mobile by opening up device preview mode in Chrome Devtools (which uses touch events when you click).

This is perfect! Thanks a lot. – Radek John Feb 18 '18 at 20:48 — Radek John, Feb 18 '18 at 20:48

score 1 · Answer 2 · answered Feb 18 '18 at 20:07

1

Here is a simple example:

HTML:
<div id="a"></div>

CSS:
#a {
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

Javascript

const myDiv = document.getElementById('a');
let currentMargin = 0;

function shiftDivRight() {
  currentMargin += 10;
  myDiv.style.marginLeft = currentMargin + 'px';
}
document.addEventListener('keydown', () => {
  shiftDivRight();
});

This will move the div to the right as long as any key is pressed down.

To fire on a specific key for example the enter key:

document.addEventListener('keydown', (event) => {
   if(event.which === 13) {
      shiftDivRight();
   }
});

answered Feb 18 '18 at 20:07

Brandon

1,747
2
13
22

The question is asking about mobile devices and HTML buttons, not pressing the right arrow key on a desktop computer. – Michael Feb 18 '18 at 20:13
@MichaelYang My Mistake. – Brandon Feb 18 '18 at 20:47
Yes, i already have a function like this. I just want HTML button to call it in a similar way as the keyboard does. – Radek John Feb 18 '18 at 20:47

score 0 · Answer 3 · answered May 19 '23 at 09:29

        <script type="text/javascript">
        let i = 0;
        let pressed = false;

        document.getElementById('div-1').onmousedown = ()=> {
            pressed = true;
            increment();
        }

        document.getElementById('div-1').onmouseup = ()=> {
            pressed = false;
            increment();
        }

        function increment(){
            
            if(!pressed) return;
            else i++;
            console.log(i);
            setTimeout(()=> increment(), 10)
        }
    </script>

How to Execute function repeatedly when the user holds the button?

3 Answers3