How to disable onkeyup for a few seconds

Question

im creating a browser game and i have added keybinds so the player can use keys to move around the world. If people use the buttons to move, these buttons are getting hidden for 5 seconds to allow an animation to end. Now i want to do this for the keybinds too. For example: Player presses spacebar and a interval will run that lasts 5 seconds. Pressing space again will glitch out really bad running the same interval twice. So how do i disable a function for 5 seconds after it has been called so that it won't glitch out?

This is the code i use for the keys:

<script>
            document.body.onkeyup = function(e){
                if(e.keyCode == 32){
                    var cmd = "<?php echo $row['HEADING']; ?>";
                    if(cmd == "N") myMoveUp();
                    if(cmd == "E") myMoveRight();
                    if(cmd == "S") myMoveDown();
                    if(cmd == "W") myMoveLeft();
                }
                if(e.keyCode == 37){
                    ChangeHeadingKP("W");  
                }
                if(e.keyCode == 38){
                    ChangeHeadingKP("N");  
                }
                if(e.keyCode == 39){
                    ChangeHeadingKP("E");  
                }
                if(e.keyCode == 40){
                    ChangeHeadingKP("S");  
                }
            }
            </script>

Any help would be appreciated.

Answer 1

I wouldn't rely on timing (say, 5 seconds) because when you change them, you'll have to review your code.

Instead I'd rely on toggling a flag by calling specific methods, like this:

keymanager.suspend();
// play animation, cutscene or whatever
keymanager.resume();

Those two functions are easy to define, along with the keymanager , as follows:

var keymanager = {
  "active": true,
  "suspend": () => {
    keymanager.active = false;
  },
  "resume": () => {
    keymanager.active = true;
  }
};

All that remains is the key event handler bailing out when keys are deactivated:

document.body.onkeyup = function (e) {

  if (!keymanager.active)
  {
    return; // do not process any keys
  }

  // rest of your code...
}