[SOLUCIONADO] Problemas con este codigo

[helion]

hola a todos, porfavor quisiera que me ayuden con el siguiente codigo :

[JSFIDDLE="http://jsfiddle.net/d7nkpope/"][/JSFIDDLE]

Código PHP:

  <style>   
div {position: absolute;left: 45px;top: 109px;background-color: #bca;width: 42px;border: 1px solid green;}   
</style> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script>  
<button id="go" onclick="a();">&raquo; Run</button> 
<button id="go" onclick="b();">&raquo; abajo</button> 
<div id="block">Hello!</div> 
<script type="text/javascript"> 
function handleArrowKeys(evt) { 
evt = (evt) ? evt : ((window.event) ? event : null); 
if (evt) { 
switch (evt.keyCode) { 
case 39:  
a(); 
break; 
case 40: 
b(); 
break;     
}}}  document.onkeyup = handleArrowKeys; 
 
 
function a(){ 
    var posicionx=document.getElementById("block").offsetLeft; 
     
$( "#block" ).animate({ 
left: posicionx+30, 
}, 300 ); 
     } 
      
function b(){ 
    var posiciony=document.getElementById("block").offsetTop; 
     
$( "#block" ).animate({ 
top: posiciony+30, 
}, 300 ); 
     } 
</script>  
  

lo que hace es que al presionar los botones del teclado, derecha y abajo... e div baje o avance 30px por cada presionada con una animacion de 300 minisegundos...

hasta ahi me da perfecto ... el problema se da cuando por ejemplo presiono de rapido 5 veces los botones y ahi se ve la falla ...

Lo que quiero pedirles es de que porfavor me ayuden a como BLOQUEAR las teclas derecha, abajo por un tiempo de 300minisegundos... y luego pasado ese tiempo permita volver a presionarlos !

me ayudan...

[Alexis88]

Podrías utilizar una variable comodín a la cual le asignarás un valor cuando se pulse la tecla y se lo cambiarás cuando acabe el efecto. Si se vuelve a pulsar la tecla, verificas el valor de la variable y de no haber cambiado, no ejecutas la función.

Código Javascript:

animar = true;
 
function handleArrowKeys(evt) { 
    evt = (evt) ? evt : ((window.event) ? event : null); 
    if (evt) { 
        switch (evt.keyCode) { 
            case 39:  
                if (animar){
                    a();    
                } 
            break; 
            case 40: 
                if (animar){
                    b();    
                } 
            break;     
        }
    }
}  
 
document.onkeyup = handleArrowKeys; 
 
function a(){ 
    var posicionx=document.getElementById("block").offsetLeft; 
    animar = false;
    
    $( "#block" ).animate({ 
        left: posicionx+25, 
    }, 750, function(){
        animar = true;
    }); 
} 
      
function b(){ 
    var posiciony=document.getElementById("block").offsetTop; 
     
    $( "#block" ).animate({ 
        top: posiciony+25, 
    }, 750, function(){
        animar = true;
    }); 
}
 

Saludos

[helion]

Iniciado por Alexis88

Podrías utilizar una variable comodín a la cual le asignarás un valor cuando se pulse la tecla y se lo cambiarás cuando acabe el efecto. Si se vuelve a pulsar la tecla, verificas el valor de la variable y de no haber cambiado, no ejecutas la función.

Código Javascript:

animar = true;
 
function handleArrowKeys(evt) { 
    evt = (evt) ? evt : ((window.event) ? event : null); 
    if (evt) { 
        switch (evt.keyCode) { 
            case 39:  
                if (animar){
                    a();    
                } 
            break; 
            case 40: 
                if (animar){
                    b();    
                } 
            break;     
        }
    }
}  
 
document.onkeyup = handleArrowKeys; 
 
function a(){ 
    var posicionx=document.getElementById("block").offsetLeft; 
    animar = false;
    
    $( "#block" ).animate({ 
        left: posicionx+25, 
    }, 750, function(){
        animar = true;
    }); 
} 
      
function b(){ 
    var posiciony=document.getElementById("block").offsetTop; 
     
    $( "#block" ).animate({ 
        top: posiciony+25, 
    }, 750, function(){
        animar = true;
    }); 
}
 

Saludos

muchas gracias :D me sirvio