[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