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

Question

我正在尝试在 Vue.js 的场景中创建 Angular 色移动。
我为左右按钮添加了键绑定(bind):

  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