how do i set an eventlistener and prevent key spamming

Question

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
        }
    });

use code editor of this site and make it in a runnable code here so everyone can debug easily — Amir Rahman, May 01 '22 at 05:11
I believe what you're looking for is called Throtteling https://stackoverflow.com/questions/27078285/simple-throttle-in-javascript — svarog, May 01 '22 at 05:17
@svarog i think its a bit more complicated where it can be solved with a boolean — Amir Rahman, May 01 '22 at 05:20

score 1 · Accepted Answer · answered May 01 '22 at 05:54

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()
})

answered May 01 '22 at 05:54

Amir Rahman

1,076
1
6
15

if tried with the timeElapsed but this just works as setTimeout.. if i spamm the attack button it just delays the attack animation . So if i press it 5 times in 1 second it animates the attack 5 times with the 750 delay in between. – Niguel Gunther May 01 '22 at 15:35
you have to define your attack function in global scope inside the slowDown function then use that variable with .run method to call it from addEventListeners this should restrict rapid triggers less than 'x' seconds – Amir Rahman May 01 '22 at 15:44
can you upload your full project here and give link to that https://jsfiddle.net/ – Amir Rahman May 01 '22 at 15:48
im not sure on how to do that . i have 3 seperate js files . ill try to combine them for jsfiddle . https://jsfiddle.net/Aquah202002/gszok2un/2/ it not working like supposed to . this is all new to me srry – Niguel Gunther May 01 '22 at 18:05
1

Thank you @ Amir Rahman i got it to work . i was setting the wrong function into the slowDown :) – Niguel Gunther May 02 '22 at 23:06
@NiguelGunther happy to hear that ! your wellcome – Amir Rahman May 03 '22 at 10:02

Maik Lowrey · Answer 2 · 2022-05-01T06:03:45.157

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
}

So the attack button isnt press and hold . its a press and release. So what happens now is that the layer who can spamm their key faster wins — Niguel Gunther, May 01 '22 at 15:39

how do i set an eventlistener and prevent key spamming

2 Answers2