addEventListener para un botón que se mantiene pulsado

Question

he realizado una especie de joystick que al pulsarlo mueve una imagen de fondo en un

var posY = 27.5; var repetir = true; function img(evento) { var joy = document.getElementsByClassName("joystick"); var img = document.getElementById("imagen1"); while (evento === true) { posY++; img.style.backgroundPositionY = posY + "px"; } } quiero que al pulsar el boton del joystick, entre en un bucle que incremente la variable de desplazamiento "posY" desplazando la imagen hasta que deje de pulsar el boton. No hace falta que trabajeís con mi ejemplo; tan solo quiero ver un javascript que mantenga un bucle asta que se deje de pulsar un boton. Muchas gracias a todos los programadores expertos por vuestra ayuda el resultado del movimiento de la foto de fondo al pulsar un objeto distinto de botón estaría aquí;En este enlace se puede observar un joystikc que usa setInterval para aumentar un contador que serviría para mover una imagen o cualquier objeto que quieras desplazar

Pablo Lozano · Accepted Answer

El problema de usar un bucle ahí es que no se va a enterar de cuándo has dejado de pulsar el botón, porque el bucle se va a ejecutar mientras el "flag" pulsado esté activo... y a su vez el flag estará activo mientras el bucle no pare.

Javascript sólo trabaja con un hilo y los eventos se gestionan añadiéndolos a una cola. Cuando el hilo que está actualmente en ejecución termina, se toma el siguiente trozo de código pendiente de ejecución. Te pongo un ejemplo:

document.querySelector('button').addEventListener('click',()=> console.log('Botón pulsado'));

setTimeout(function () {
  for (let i = 0; i < 10000000; i++) {
    if (i%10000===0) {
      console.log('En el bucle',i);
    }
  }
},100);

<button>Click</button>

Esto lo puedes solucionar usando setInterval, que permite ejecutar periódicamente una función hasta que decides cancelar la ejacución con clearInterval:

const button =document.querySelector('button');
let pressed= false;
let intervalId;
button.addEventListener('mousedown',() => {
  pressed = true;
  intervalId = setInterval(whilePressed,100);
});
button.addEventListener('mouseup',() => {
  pressed = false;
});

function whilePressed() {
  if (pressed) {
    console.log('Botón pulsado');
  } else {
    console.log('Botón soltado');
    clearInterval(intervalId);
  }
}

<button>Click</button>

addEventListener para un botón que se mantiene pulsado

One Answer

Add your own answers!

Ask a Question