Remove key press delay in Javascript

by

If you want key repeat in a controllable fashion, you will have to implement it yourself, as keypress events are fired dependent on the OS’s idea of how keys should repeat. That means there may be variable initial and following delays, and holding down two keys at once will cause only one of them to repeat.

You will have to keep a record of whether each key is currently pressed, and ignore keydown events when the key is already down. This is because many browsers will fire a keydown as well as a keypress event when an autorepeat occurs, and if you’re reproducing key repeat yourself you’ll need to suppress that.

For example:

// Keyboard input with customisable repeat (set to 0 for no key repeat)
//
function KeyboardController(keys, repeat) {
    // Lookup of key codes to timer ID, or null for no repeat
    //
    var timers= {};

    // When key is pressed and we don't already think it's pressed, call the
    // key action callback and set a timer to generate another one after a delay
    //
    document.onkeydown= function(event) {
        var key= (event || window.event).keyCode;
        if (!(key in keys))
            return true;
        if (!(key in timers)) {
            timers[key]= null;
            keys[key]();
            if (repeat!==0)
                timers[key]= setInterval(keys[key], repeat);
        }
        return false;
    };

    // Cancel timeout and mark key as released on keyup
    //
    document.onkeyup= function(event) {
        var key= (event || window.event).keyCode;
        if (key in timers) {
            if (timers[key]!==null)
                clearInterval(timers[key]);
            delete timers[key];
        }
    };

    // When window is unfocused we may not get key events. To prevent this
    // causing a key to 'get stuck down', cancel all held keys
    //
    window.onblur= function() {
        for (key in timers)
            if (timers[key]!==null)
                clearInterval(timers[key]);
        timers= {};
    };
};

then:

// Arrow key movement. Repeat key five times a second
//
KeyboardController({
    37: function() { Move(-1, 0); },
    38: function() { Move(0, -1); },
    39: function() { Move(1, 0); },
    40: function() { Move(0, 1); }
}, 200);

Although, most action-based games have a fixed-time main frame loop, which you can tie the key up/down handling into.

More Related Contents:

  1. How to trigger event in JavaScript?
  2. Firing event on DOM attribute change
  3. What exactly is the parameter e (event) and why pass it to JavaScript functions?
  4. How can I capture the right-click event in JavaScript? [duplicate]
  5. How to find out which JavaScript events fired?
  6. event.preventDefault() vs. return false (no jQuery)
  7. How do you log all events fired by an element in jQuery?
  8. Accessing an object’s property from an event listener call in JavaScript
  9. Pass mouse events through absolutely-positioned element
  10. jQuery equivalent of JavaScript’s addEventListener method
  11. How do you detect the clearing of a “search” HTML5 input?
  12. Are event handlers in JavaScript called in order?
  13. Handling “onclick” event with pure JavaScript
  14. JavaScript add events cross-browser function implementation: use attachEvent/addEventListener vs inline events
  15. visibilitychange event is not triggered when switching program/window with ALT+TAB or clicking in taskbar
  16. How to implement a lock in JavaScript
  17. Fire oninput event with jQuery
  18. Replacement for deprecated `keypress` DOM event
  19. What is event bubbling and capturing?
  20. How can I trigger a JavaScript event click
  21. The value of “this” within the handler using addEventListener
  22. React onClick function fires on render
  23. Reading client side text file using Javascript
  24. How to stop default link click behavior with jQuery
  25. Enter key press behaves like a Tab in Javascript
  26. How to delay calling of javascript function?
  27. Difference between document.addEventListener and window.addEventListener?
  28. How to listen for child window closing?
  29. JavaScript Event prototype in IE8
  30. How browser executes Javascript and renders asynchronously

Leave a Comment