JS Keydown have some strange 1 second delay before firing events after the first event

I'm trying to create a character movement on the scene in Vue.js.

I've added a key binding to right and left buttons:

  created () {      window.addEventListener('keyup', this.keyup)      window.addEventListener('keydown', this.keydown)    }  

and here are the methods:

    keydown (e) {        if (e.keyCode === 37) this.onWalkLeftPressed()        if (e.keyCode === 39) this.onWalkRightPressed()      },        keyup (e) {        if (e.keyCode === 37) this.onWalkLeftReleased()        if (e.keyCode === 39) this.onWalkRightReleased()      }  

When I press and keep my finger on keyboard without releasing it, logically it should instantly start to moving to corresponding direction by increasing or decreasing the "position X" values.

But once I press the button, it fires the first event, then waits for about 500ms, and then continues to firing the other events until I release the button.

Is it some sort of default behaviour of the browser, and do you have any idea how to override it so it keeps firing the event without any delay between the first and the other events ?

Here how it looks:

https://imgur.com/a/9VV1lhM

https://stackoverflow.com/questions/66512001/js-keydown-have-some-strange-1-second-delay-before-firing-events-after-the-first March 07, 2021 at 08:11AM