2

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

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

1
  • ¿La respuesta solucionó tu problema? Por favor no olvides marcarla como aceptada si tu problema fue resuelto. Puedes hacerlo marcando el ✓ en la parte izquierda de la respuesta (se pondrá verde, ganarás 2 puntos de reputación y podrías acceder a nuevos privilegios). ¡Mira ¿Qué debo hacer cuando alguien contesta mi pregunta? si tienes alguna duda!
    – Marcos
    Commented el 29 sept. 2020 a las 11:24

2 respuestas 2

5

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>

2
  • 3
    +1 y solo a modo de comentarios. Podrías hacer el clearInterval(intervalId); directamente en el mouseup (te ahorras el flag) y en lugar de usar setInterval, podrían usar requestAnimationFrame para una mejor calidad de animación.
    – Marcos
    Commented el 28 sept. 2020 a las 13:08
  • 1
    @Marcos Correcto. En estos ejemplos estaba pensando más en controlar los tiempos sin tener que saber el número de frames por segundo. Y respecto al flag, también, se podría eliminar, pero me di cuenta ya al enviar la respuesta y decidí dejarlo. Commented el 28 sept. 2020 a las 13:25
0

Aqui mi codigo, multi-botones. Podemos generar numerosas desde 0 hasta el infinito dejando presionado. Del mismo modo pueden actuar varios botones haciéndolo lo mismo, a gusto de cada uno. En mi caso para servo-motores

<!DOCTYPE html>
<html>

<body>
  <button id='B1' onmousedown="botonsinlimites('B1');" onmouseup="borrarsinlimites();">Boton1</button>
  <button id='B2' onmousedown="botonsinlimites('B2');" onmouseup="borrarsinlimites();">Boton2</button>
  <br>
  <p id="demo1"></p>
  <p id="demo2"></p>

  <script>
    var tiempototal = 1;
    var intervalo;

    function botonsinlimites(x) {
      intervalo = setInterval(function() {
        if (tiempototal == -1) {
          clearInterval(intervalo);
        } else {
          tiempototal += 1;
          document.getElementById("demo1").innerHTML = tiempototal;
          document.getElementById("demo2").innerHTML = "Boton: id=" + x;
        }
      }, 100);
      tiempototal = 0;
    }

    function borrarsinlimites() {
      clearInterval(intervalo);
      document.getElementById("demo1").value = 0;
    }
  </script>
</body>

</html>

3
  • Tu respuesta podría mejorarse con información de apoyo adicional. Por favor, pulsa en editar para añadir más detalles, como citas o documentación, para que otros puedan confirmar que tu respuesta es correcta. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 12 may. 2022 a las 6:34
  • Aprovechando que has escrito una respuesta (mi comentario va acerca de las ediciones): ¡no toques el código de los demás (salvo que sea para dar mejor formato)! Mucho menos edites preguntas porque "ya están resueltas". Las ediciones no tienen el propósito de responder al autor de la pregunta/respuesta. Por favor, lee ¿Por qué puede la gente editar mis mensajes? ¿Cómo funciona el trabajo de edición? y haz el recorrido de bienvenida para conocer el funcionamiento del sitio.
    – padaleiana
    Commented el 12 may. 2022 a las 11:09
  • Gracias por la informacion
    – ESP
    Commented el 10 jun. 2022 a las 17:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.