how active two keyboard events esimultanialy

Question

I'm trying to execute two javascript functions:

<body onkeydown="movimentation()">
        <script> 
        function movimentation(){
            var key=event.key;
            if(key==='8'){
                up2();
                console.log("the key pressioned is " + key);
                
            };
            if(key==="5"){
                down2();
                console.log("the key pressioned is " + key);
            };
            if(key==="6" ){
                rigth2();
                console.log("the key pressioned is " + key);
            };
            if(key==="4"){
                left2();
                console.log("the key pressioned is " + key);
            };if(key==="w"){
                up1();
                console.log("the key pressioned is " + key);
                
            };
            if(key==="s" ){
                down1();
                console.log("the key pressioned is " + key);
            };
            if(key==="d"){
                rigth1();
                console.log("the key pressioned is " + key);
            };
            if(key==="a"){
                left1();
                console.log("the key pressioned is " + key);
            }else{};

        }
        function p2movimentation(key){
            if(key==='8'){
                up2();
                console.log("the key pressioned is " + key);
                
            };
            if(key==="5" && p2x<98){
                down2();
                console.log("the key pressioned is " + key);
            };
            if(key==="6" ){
                rigth2();
                console.log("the key pressioned is " + key);
            };
            if(key==="4"){
                left2();
                console.log("the key pressioned is " + key);
            }else{};
        };
        function p1movimentation(key){

            if(key==="w"){
                up1();
                console.log("the key pressioned is " + key);
                
            };
            if(key==="s"){
                down1();
                console.log("the key pressioned is " + key);
            };
            if(key==="d"){
                rigth1();
                console.log("the key pressioned is " + key);
            };
            if(key==="a" ){
                left1();
                console.log("the key pressioned is " + key);
            }else{};
        };

(up1(),down1(),rigth1() and left1() moviment player 1 and up2(),down2(),rigth2() and left2() moviment player 2)

But the activation of the first function prevent the activation of the second one.

I would love that the two functions are executed simultaneously.

The two functions cannot be executed simultaneously upon a key press, JavaScript is a single threaded process, which means it has to execute one before the other. You need to stipulate why two functions need to run at the same time. — Jim Grant, Dec 10 '20 at 08:51
This question might help. https://stackoverflow.com/questions/5203407/how-to-detect-if-multiple-keys-are-pressed-at-once-using-javascript — Ozgur Sar, Dec 10 '20 at 11:28
In your above code, if you press "8" and "w" at the same time, then javascript trigger your movement function twice, first with "8", then with "w" (or vise versa). This would cause up2() to be called, then right after, up1() will be called. They won't be called at the *exact* same time, but close enough to each other that it shouldn't matter. what are these two functions doing? Are they triggering some animation, and one animation is happening before the other? Are they logging? Are you only seeing one of these callbacks execute? You real issue probably lies in how these functions are coded — Scotty Jamison, Dec 10 '20 at 18:54
up1() move player 1 and up2() move player 2, the player 1 press "w" and move ,if player 2 press "8" player 1 stop and player 2 move, i want they can move simultaneously (sorry for my english) — Vítor Parenti, Dec 10 '20 at 19:12
I've updated my answer. I think the issue is that the keydown event does not behave the way you might expect it to. — Scotty Jamison, Dec 10 '20 at 21:22

score 0 · Answer 1 · answered Dec 10 '20 at 06:09

You can make a wrapper function which will call the two other functions like this:

function wrapperFunction(e){
  p1movimentation(e);
  p2movimentation(e);
}

function p1movimentation(e){
  console.log("p1movimentation");
}

function p2movimentation(e){
  console.log("p2movimentation");
}

<body onkeydown="wrapperFunction();"></body>

Scotty Jamison · Answer 2 · 2020-12-10T21:22:21.107

There's no way to do it.

Javascript is single-threaded. It can only do one thing at a time. Even when you attach multiple event listeners to something, javascript will still run each event listener one at a time. If another event fires while javascript is busy doing something, it won't go run the relevant code until it finishes what it's currently doing. The way javascript does this is referred to as the event loop.

To get your desired effect, you'll likely have to rethink what your two functions are doing. Maybe you need to split up the functions, so that the functions can take turns? e.g. onkeydown="p1move();p2move();p1cleanUp();p2cleanUp()". If you edit your question with the bodies of these functions, we might be able to help out more.

EDIT

I think I've figured out what the issue is here. You're relying on the fact that keydown is repeatedly fired as the user holds down a key, but the issue is if the user holds down a second key, then that second key starts repeatedly firing instead.

What you need to do instead is keep track of which keys are currently being held down. Then, you could, for example, make a game loop that runs every so often that'll check which keys are currently being pressed, and react accordingly.

In order to know which keys are currently being pressed, you'll need to listen to both the keydown event and the keyup event. (when keydown is fired, add the key to a list. When keyup is fired, remove the key from the list).

This stackoverflow answer explains the same thing but in a lot more detail. The question is referring to the same thing you're struggling with.

how active two keyboard events esimultanialy

2 Answers2