JavaScript keydown events seem to exhibit an unusual one-second delay in triggering subsequent events after the initial event

Question

JavaScript keydown events seem to exhibit an unusual one-second delay in triggering subsequent events after the initial event

I'm currently working on implementing character movement within a scene using Vue.js.

For this purpose, I have set up key bindings for both left and right buttons:

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

Below are the methods associated with these key events:

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

My goal is to enable instant character movement upon pressing and holding down a key, with no delay between actions. However, what I am experiencing is that once a key is pressed, there is an initial event fired followed by a slight delay of approximately 500ms before consecutive events are triggered until the key is released.

Is this behavior inherent to browsers, and do you have any suggestions on how I can override it to ensure seamless event firing without any interruptions?

You can view the current setup here:

https://i.sstatic.net/3qTKV.jpg

javascript vue.js keydown

Answer 1

Answer №1

It's common for there to be a delay in key events.

For optimal gaming performance, it's recommended to handle key states using the keydown and keyup events and updating the position at set intervals.

In frameworks like vue.js, you can achieve this by setting up event listeners and checking key states periodically. Here is an example (JSFIDDLE DEMO)

 // Vue.js code snippet
new Vue({
  keys: {}, // Define keys outside reactive data 
  data: { // Your data here } 
  created () {
    window.addEventListener('keyup', this.keyup);
    window.addEventListener('keydown', this.keydown);
    
    setInterval(this.customKeysChecker, 20); // Check keys every 20ms
  },
  methods: {
    keydown (e) {
        this.$options.keys[e.keyCode] = true;
    },
    keyup (e) {
        this.$options.keys[e.keyCode] = false;
    },
    customKeysChecker() {
      const { keys = {} } = this.$options;
      
      if (keys[37]) this.onWalkLeftPressed(); // Perform action when left key is pressed
      if (keys[39]) this.onWalkRightPressed(); // Perform action when right key is pressed
    },

    onWalkLeftPressed() { // Handle code for walking left },
    onWalkRightPressed() { // Handle code for walking right }
  }
})

Check out these helpful links for more information:

How to remove key press delay in JavaScript
Fixing delay in JavaScript keydown events

Answer 2

It's common for there to be a delay in key events.

For optimal gaming performance, it's recommended to handle key states using the keydown and keyup events and updating the position at set intervals.

In frameworks like vue.js, you can achieve this by setting up event listeners and checking key states periodically. Here is an example (JSFIDDLE DEMO)

 // Vue.js code snippet
new Vue({
  keys: {}, // Define keys outside reactive data 
  data: { // Your data here } 
  created () {
    window.addEventListener('keyup', this.keyup);
    window.addEventListener('keydown', this.keydown);
    
    setInterval(this.customKeysChecker, 20); // Check keys every 20ms
  },
  methods: {
    keydown (e) {
        this.$options.keys[e.keyCode] = true;
    },
    keyup (e) {
        this.$options.keys[e.keyCode] = false;
    },
    customKeysChecker() {
      const { keys = {} } = this.$options;
      
      if (keys[37]) this.onWalkLeftPressed(); // Perform action when left key is pressed
      if (keys[39]) this.onWalkRightPressed(); // Perform action when right key is pressed
    },

    onWalkLeftPressed() { // Handle code for walking left },
    onWalkRightPressed() { // Handle code for walking right }
  }
})

Check out these helpful links for more information:

How to remove key press delay in JavaScript
Fixing delay in JavaScript keydown events

JavaScript keydown events seem to exhibit an unusual one-second delay in triggering subsequent events after the initial event

Answer №1

Similar questions

Facing the issue of not being able to overwrite the default initialized data (variable) in VUE.JS 2 when using the

What is the method for including an inner wrapper around an element in Angular?

Content duplication in Three.js with WebGL

Using JavaScript within HTML documents

Is it beneficial to display three.js on a <canvas> rather than a <div>?

Utilizing Apollo and Vue.js to make GraphQL queries with multiple aliases

Do API applications require a session to function properly?

Using Express JS to implement a post method for multipart form data transmission

Having trouble retrieving json data from PHP page using jQuery $.ajax

Is it possible to make changes to a solidity smart contract that has been deployed on the Hedera TestNet?

Exploring Vue.js with the composition API, delving into the world of "Mixins" and mastering life-cycle hooks

What is the best way to set up webpack to exclude a non-existent asset in my scss files?

How to set a default option in a dropdown menu using Angular 4

Injecting Ajax-loaded content into an HTML modal

Discover the best correlation among multiple arrays

Passing information from the created hook to the mounted hook in VueJS

JSON dataset for advanced charting with ApexCharts

What steps can I take to resolve this error when utilizing an npm package in client-side JavaScript?

What is the name of the file that contains a class?

What could be the source of the error message: "Error: .eslintrc.js: The environment key 'vue/setup-compiler-macros' is not recognized