Smooth keyboard input in javascript

Question

I have started to program in Javascript to make a 3D application with WebGL. I need to receive the keyboard inputs in an other way, because the way I do it, like this:

var keys = {};
window.addEventListener("keydown", (e) =>  {
    keys[e.which] = true;

    updateKeys();
});

window.addEventListener("keyup", (e) =>  {
    delete keys[e.which];

    updateKeys();
});



function updateKeys() {
    for(var i in keys) {
        if(keys[87] === true) {
            //Move
        }
    }
}

produces a very rough result and there is stuttering. Is there some way I can get a smooth input?

https://stackoverflow.com/questions/5203407/how-to-detect-if-multiple-keys-are-pressed-at-once-using-javascript — MoloF, May 21 '20 at 18:08
@MoloF I don't get how this program should work, I started programming in js 3 days ago, also this is deprecated — user11914177, May 21 '20 at 18:40

score 2 · Accepted Answer · answered May 23 '20 at 15:14

2

It's stuttering, because you run your movement along with the key events. And your key events take advantage of event.repeat, which happens when you keep your key pressed.

You should do two things:

In your keydown listener, add the following line to ignore repeated presses:

if (e.repeat) return;

Move your movement logic somewhere else, namely window.requestAnimationFrame() handler.

answered May 23 '20 at 15:14

Robo Robok

21,132
17
68
126

1

You're welcome! I hope you'll be comfortable with `requestAnimationFrame()`. – Robo Robok May 23 '20 at 15:33
It's absolutely no problem, because I use `requestAnimationFrame()` anyways. – user11914177 May 23 '20 at 15:43

Smooth keyboard input in javascript

1 Answers1