JS Keydown 在第一个事件之后触发事件之前有一些奇怪的 1 秒延迟

Question

我正在尝试在 Vue.js 的场景中创建角色移动。

我已经为左右按钮添加了键绑定：

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

这里是方法：

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

当我按下并保持手指在键盘上而不松开时，逻辑上它应该通过增加或减少“位置 X”值立即开始向相应方向移动。

但是一旦我按下按钮，它就会触发第一个事件，然后等待大约 500 毫秒，然后继续触发其他事件，直到我松开按钮。

这是浏览器的某种默认行为吗？您是否知道如何覆盖它，以便在第一个事件和其他事件之间没有任何延迟地持续触发事件？

这是它的样子：

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

Answer 1

延迟是默认行为。

所以对于游戏来说，你需要使用keydown和keyup事件来实现一个按键状态。然后每隔一段时间，每 x 毫秒检查一次并更新位置。

在vue.js中，代码将是这样的(JSFIDDLE DEMO)

new Vue({
  keys: {}, // this variable should be outside of reactive data
  data: { // Your data here } 
  created () {
    window.addEventListener('keyup', this.keyup);
    window.addEventListener('keydown', this.keydown);
    
    setInterval(this.customKeysChecker, 20);
  },
  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();
      if (keys[39]) this.onWalkRightPressed();
    },

    onWalkLeftPressed() { //Your code here },
    onWalkRightPressed() { //Your code here }
  }
})

这里有一些有用的链接供您查看：

remove key press delay in javascript
How to fix delay in javascript keydown

JS Keydown 在第一个事件之后触发事件之前有一些奇怪的 1 秒延迟

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

javascript

keydown

vue.js