Is it possible to make JQuery keydown respond faster?

Question

I am writing a simple page with JQuery and HTML5 canvas tags where I move a shape on the canvas by pressing \'w\' for up, \'s\' for down, \'a\' for left, and \'d\' for right

Answer 1

It's not jQuery. You'll find the exact same delay in Notepad.

What you'll have to do is this

var keydown=false;
$(document).on('keydown', function(e){
    if (!keydown) 
    {
        keydown=e.which;
        console.log('start moving and keep moving');
    }
}).on('keyup', function(){
    console.log("stop moving");
    keydown=false;
});​

Answer 2

I believe what you're seeing is the repeat rate of a key. This is set in a user's OS - not the browser. Basically, there's nothing you can do aside from ask users to change it.

http://windows.microsoft.com/en-US/windows-xp/help/adjust-the-character-repeat-rate

EDIT

This isn't the answer to your question, but I'll leave this up here because the repeat rate is still the issue. Note that @nnnnnn showed there is a viable workaround.

Answer 3

What you're missing is a "game loop".

Instead of reacting directly to key down or up in deciding whether and when to move your shape around the canvas, you need to use the key events to keep track of which keys are down at any given moment, and then check the key state from a setTimeout()-based loop running independent of the key events.

You've started to do that with your keys variable keeping track of whether a given key is down at any moment:

// in keydown
keys[event.which] = true;
// in keyup
delete keys[event.which];

...except that event is not defined - you need to make it a parameter of the event handler, and also none of your code ever actually checks the values in keys.

Here's a simplified version of what I'm talking about:

$(document).ready(function(e){
  var keys = {};

  $("input").keydown(function(event){
    keys[event.which] = true;
  }).keyup(function(event){
    delete keys[event.which];
  });

  function gameLoop() {
    // w for north
    if (keys[87]) {
       north++;
       flipednorth--;
    }
    //press s for south
    if (keys[83]) {
       north--;
       flipednorth++;
    }
    // etc. for other keys

    // code to move objects and repaint canvas goes here

    setTimeout(gameLoop, 20);
  }
  gameLoop();
});

Demo: http://jsfiddle.net/ktHdD/1/

The gameLoop() function will run ever 20 milliseconds or so (you can vary this as needed, but that's fast enough for reasonably smooth animation). Each time it runs it checks if any keys are down and if so adjusts the relevant position variables and repaints. If you have other objects that move around automatically (e.g., in a game there might be bad guys) you'd update them in the gameLoop() function too.