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