Ver Mensaje Individual
  #1 (permalink)  
Antiguo 26/08/2014, 08:23
Avatar de blancoarnau
blancoarnau
 
Fecha de Ingreso: junio-2013
Mensajes: 119
Antigüedad: 10 años, 11 meses
Puntos: 0
Finalizar una función en una animación

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:
Ver original
  1. function muevete(estado){
  2.   if(estado){
  3.     document.getElementById('btn').setAttribute('onclick','muevete(false)');
  4.     atras();
  5.   }else{
  6.     document.getElementById('btn').setAttribute('onclick','muevete(true)');
  7.     adelante();
  8.    }
  9. }
  10. function adelante(){
  11.   e = document.getElementById('cuadrado').style.left;
  12.   e = e.replace('%','');
  13.   e = parseInt(e,10);
  14.   if(e!=100){
  15.     e = e + 10;
  16.     document.getElementById('cuadrado').style.left=e + '%';
  17.     setTimeout(function(){adelante();},25);
  18.    }
  19. }
  20. function atras(){
  21.   a = document.getElementById('cuadrado').style.left;
  22.   a = a.replace('%','');
  23.   a = parseInt(a,10);
  24.   if(a!==0){
  25.     a = a - 10;
  26.     document.getElementById('cuadrado').style.left=a + '%';
  27.     setTimeout(function(){atras();},25);
  28.   }
  29. }

¿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! :)