tecla - ¿Cómo puedo evitar los eventos keydown autorepeatados en JavaScript?

onkeyup html attribute

Question

Si el usuario mantiene presionada la tecla, se activan múltiples eventos de desactivación de teclas. Por razones de usabilidad, necesito usar keydown, no keyup, pero quiero evitar esta situación. Mi código relevante es el siguiente:

$(document).keydown(function(e) { 
        var key = 0;


        if (e == null) { key = event.keyCode;}  
        else {  key = e.which;} 


        switch(key) {
            case config.keys.left:                
              goLeft();
              break;
            case config.keys.up:                        
              goUp();
              break;
            case config.keys.right:                     
              goRight();
              break;
            case config.keys.down:                
              goDown();
              break;
            case config.keys.action:              
              select();
              break;
        }     
      });

Entonces, cuando el usuario mantiene presionada la tecla hacia abajo, por ejemplo, goDown () se dispara varias veces. Me gustaría que se dispare solo una vez, incluso si el usuario mantiene presionada la tecla.

Answer 1

(Copiado de otra pregunta que resultó ser un duplicado de esta).

La biblioteca KeyPress de dmaurolizer proporciona un control preciso sobre todos los eventos del teclado. Usted proporciona funciones de devolución de llamada para eventos. El evento keydown envía un isRepeat opcional isRepeat para que pueda ignorar las repeticiones automáticas. Aquí hay una muestra que usa esa funcionalidad para el control de empuje en un videojuego:

var my_combos = listener.register_many([
    {
        "keys"          : "up",
        "on_keydown"    : function(e, num, isRepeat) {
            if (isRepeat) return ;
            thrust = 0.1;
        },
        "on_keyup"      : function() {
            thrust = 0;
        }
    }
]);

Answer 2

Entonces, si la solución existente parece dudosa (no considera el caso cuando se presionan 2 o más botones simultáneamente), sugiero otra solución que la tenga en cuenta.

El objeto _prevKeyDown es almacenar las claves que se presionan actualmente.

    _prevKeyDown = {}

    function _downKey( event )
    {
        var wh = event.which;
        var kC = event.keyCode;

        if( _prevKeyDown[ wh ] == null )
        {
            _prevKeyDown[ wh ] = {};
        }

        _prevKeyDown[ wh ][ kC ] = true;
    };

    function _upKey( event )
    {
        var wh = event.which;
        var kC = event.keyCode;

        if( _prevKeyDown[ wh ] != null )
        {
            _prevKeyDown[ wh ][ kC ] = null;
        }               
    };

    function _isKeyDown( event )
    {
        var wh = event.which;
        var kC = event.keyCode;

        var result = false;

        if( this._prevKeyDown[ wh ] != null )
        {
            if( this._prevKeyDown[ wh ][ kC ] == true )
            {
                result = true;
            }
        }

        return result;
    }

    // now your keydown/keyup handlers
    function keydown( event )
    {
        if( !_isKeyDown( event ) )
        {
            // your once-keydown handler here
            _downKey( event );
        }    
    }

    function keyup( event )
    {
        _upKey( event );
    }

Answer 3

Otro ajuste simple a la respuesta aceptada para permitir el escenario de múltiples claves:

var keyAllowed = {};

$(document).keydown(function(e) {
  if (keyAllowed [e.which] === false) return;
  keyAllowed [e.which] = false;
  // code to be executed goes here
});

$(document).keyup(function(e) { 
  keyAllowed [e.which] = true;
});

$(document).focus(function(e) { 
  keyAllowed = {};
});

Answer 4

Use event.repeat para detectar si el evento se está repitiendo o no. Luego, puede esperar a que aparezca "keyup" antes de permitir que el controlador se ejecute por segunda vez.

var allowed = true;

$(document).keydown(function(event) { 
  if (event.repeat != undefined) {
    allowed = !event.repeat;
  }
  if (!allowed) return;
  allowed = false;
  //...
});

$(document).keyup(function(e) { 
  allowed = true;
});
$(document).focus(function(e) { 
  allowed = true;
});