[SOLUCIONADO] Finalizar una función en una animación

[blancoarnau]

Hola a todos. Estoy llevando a cabo una pequeña prueba pero aparece un bug.

Aquí tenéis el enlace de la prueba: Link

Básicamente es un cuadrado rojo que va de un lado a otro pulsando el botón. El problema sucede cuando pulso tres veces seguidas el botón, que aparece dicho bug.

Lo he hecho puramente con Javascript:

Código Javascript:

function muevete(estado){
  if(estado){
    document.getElementById('btn').setAttribute('onclick','muevete(false)');
    atras();
  }else{
    document.getElementById('btn').setAttribute('onclick','muevete(true)');
    adelante();
   }
}
function adelante(){
  e = document.getElementById('cuadrado').style.left;
  e = e.replace('%','');
  e = parseInt(e,10);
  if(e!=100){
    e = e + 10;
    document.getElementById('cuadrado').style.left=e + '%';
    setTimeout(function(){adelante();},25);
   } 
}
function atras(){
  a = document.getElementById('cuadrado').style.left;
  a = a.replace('%','');
  a = parseInt(a,10);
  if(a!==0){
    a = a - 10;
    document.getElementById('cuadrado').style.left=a + '%';
    setTimeout(function(){atras();},25);
  } 
}
 

¿Alguien puede echarme un mano usando solo Javascript? No quiero usar lenguajes ajenos. He estado buscando maneras de finalizar otras funciones pero no he encontrado nada.

Os dejo el código de JSfiddle por si queréis hacer alguna prueba: Jsfiddle

¡Muchas gracias con antelación! :)

[Alexis88]

Necesitas un par de variables que te sirvan como comodines para controlar el avance/retroceso del cuadrado. Por ejemplo, veo que para avanzar, el valor de e tiene que ser diferente a 100 y para retroceder, el valor de a tiene que ser diferente a 0, entonces, solo sería cuestión de que cuando en cada caso se alcance la cifra límite, cambies el valor del comodín que corresponda al movimiento contrario, así solo cuando dicha variable tenga el valor que asignas al completar el traslado del cuadrado de un lado a otro, se podrá ejecutar el desplazamiento inverso.

Código Javascript:

flagA = false; //Comodín para avanzar
flagB = false; //Comodín para retroceder
 
function muevete(estado){
    if(estado){
        document.getElementById('btn').setAttribute('onclick','muevete(false)');
        atras();
    }else{
        document.getElementById('btn').setAttribute('onclick','muevete(true)');
        adelante();
    }
}
 
function adelante(){
    e = document.getElementById('cuadrado').style.left;
    e = e.replace('%','');
    e = parseInt(e,10);
 
    //Solo si el comodín de avance es 'false', se ejecuta el movimiento
    if (!flagA){
        if(e!=100){    
            e = e + 10;
            document.getElementById('cuadrado').style.left=e + '%';
 
            //Al alcanzar el límite, cambian los valores de los comodines
            if (e == 100) {
                flagB = false;
                flagA = true;
            }
            
            setTimeout(function(){adelante();},25);
        } 
    }
}
 
function atras(){
    a = document.getElementById('cuadrado').style.left;
    a = a.replace('%','');
    a = parseInt(a,10);
 
    //Solo si el comodín de retroceso es 'false', se ejecuta el movimiento
    if (!flagB){
        if(a!==0){
            a = a - 10;
            document.getElementById('cuadrado').style.left=a + '%';
      
            //Al alcanzar el límite, cambian los valores de los comodines
            if (a === 0) {
                flagA = false;
                flagB = true;
            }  
            setTimeout(function(){atras();},25);
        } 
    }
}
 

Saludos

[blancoarnau]

Gracias por contestar. Es una buena idea pero así solo consigo que la función no se ejecute y no es mi intención. Mi propósito es que si pulso el botón para que el cuadrado se mueve y lo vuelvo a pulsar antes de llegue al final, el cuadrado retroceda y vuelva a su sitio original.

[Alexis88]

Pues en ese caso, solo te queda cambiar el valor de los comodines al momento de ejecutarse la función y ya no cuando se alcance el final. Ya te había dado la clave, solo tenías que adaptarla a lo que necesitabas.

Saludos