'how do i set an eventlistener and prevent key spamming

I am playing around with making a 2d fighter game. using only javascript, css and html I am stuck on how to prevent the attack button to be spammed like crazy. If i press the attack key 5 times per seconde it also registers and also does the animation. I want to restrict the key register to 1 time per 750 milliseconds.

How would i accomplish this? I think it has something to do with the timeStamp but i cant work out the logic

This is what i have without the restriction:

window.addEventListener('keydown', (event) =>{
    switch (event.key) {
        case ' ':
            if (player_1.position.x < (player_2.position.x + 25))
                {player_1.attack_player_1()
                // setTimeout(() => {sword_swing.play()},200)}
                setTimeout(() => {sfx_player_1.sword_swing.play()},200)}
            else {player_1.attack_player_1_reversed()
                setTimeout(() => {sfx_player_1.sword_swing.play()},200)
            }
            break
        }
    });


Solution 1:[1]

i am assuming you might need time gap for multiple functions and for that you have to track each function time gap with separate variable instead i have created a class to use it as a slow down helper . this is an example you can edit this in your code.

class slowDown {
    constructor(cb,timeGap){
        this.last = 0
        this.run = function(){
            let current = Date.now(),
                shouldRun = (current - this.last) >= timeGap
            if(shouldRun){
                cb(current - this.last)
                this.last = current
            }            
        }
    }
}

// example use
const press = new slowDown(timeElapsed => {
    // define function here which you wanted to slow down
    console.log("pressed after " + timeElapsed + " ms")
},750)

window.addEventListener("keydown",()=>{
    press.run()
})

Solution 2:[2]

It's deepens which behavior you expect. if you press fire and still pressing you will attacking. One solution would be Throtteling what @svarog already told in the comments under your question.

The other solution would be to block after one press the button still a) it press an other button or b) set a timeout for example 1 second and the timeout expired.

In any cases i would prefer to work with e.keyCode instead of e.key.

example

document.onkeydown = check 
let lastKeyCode = '';
function check(e) {
    if (e.keyCode == 32) {  

      if(lastKeyCode == 32) return false;
      // do something
      lastKeyCode = 32;
    }

    /// other events
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Amir Rahman
Solution 2