When button pressed or held, action only happens once

Question

I know there are a bunch of other people who have asked the same or similar question but the answers they got hasn't really helped me because, they're pretty complicated and I don't understand it enough to add it to my own code. This was one I have been staring at for a while to try and understand: Javascript on key press trigger only once no luck.

What I trying to get my code to do:

No matter if I hold or push button do action only once
Do action on key down and another on key up
Be able to press multiple keys at the same time

I tried it with true false type variables mixed in:

var map = []; // creation of set
var canKEY  = true;
var a = 0;
onkeydown = onkeyup = function(e){ //creation of function
e = e || event; // to deal with IE
map[e.keyCode] = e.type == 'keydown';
/* insert conditional here */

document.getElementById("map").innerHTML = map;
document.getElementById("canKEy").innerHTML = canKEY;

if ((canKEY == true) && map[87] && map[69]){
    document.getElementById('document').innerHTML = "forwards up";
    canKEY = false;   
    }

else if ((canKEY == true) && map[87] && map[81]){
    document.getElementById('document').innerHTML = "forwards down";
    canKEY = false;
    }  

else if ((canKEY == true) && map[87]){
     document.getElementById('document').innerHTML = "forwards";                  
     canKEY = false;
     }

else{
     document.getElementById('document').innerHTML = "empty";
     canKEY = true;
     }
}
</script>

You get the point, same thing with the rest of the wasd with qe I can get one command in but then canKEY stay false and I can't input any more commands/

What am I doing wrong?

so what is the current behavior? – Liad Yogev Dec 20 '19 at 20:01 — Liad Yogev, Dec 20 '19 at 20:01

score 0 · Accepted Answer · answered Dec 20 '19 at 20:07

0

As I think, There are two ways to solve this problem:

using the mousetrap library which does it as well as desired.

Mousetrap is a simple library for handling keyboard shortcuts in Javascript.
using throttle feature in lodash.

Creates a throttled function that only invokes func at most once per every wait milliseconds. The throttled function comes with a cancel method to cancel delayed func invocations and a flush method to immediately invoke them. Provide options to indicate whether func should be invoked on the leading and/or trailing edge of the wait timeout. The func is invoked with the last arguments provided to the throttled function. Subsequent calls to the throttled function return the result of the last func invocation.

answered Dec 20 '19 at 20:07

Ali Torki

1,929
16
26

I'm going to use the code on an arduino mkr 1000 board server thing, so the javascript should independant. Is it still possible to use the mousetrap library without the board being connected to the computer? The first method they talk about on GitHub is a nono because it won't have access to the computer but what about the second method? Is it still viable? – Alex Dec 22 '19 at 11:12
For the second method, you can just use the throttle pure code. here you go: https://stackoverflow.com/questions/27078285/simple-throttle-in-js – Ali Torki Dec 22 '19 at 12:42

When button pressed or held, action only happens once

1 Answers1