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

【问题标题】：JS Keydown have some strange 1 second delay before firing events after the first eventJS Keydown 在第一个事件之后触发事件之前有一些奇怪的 1 秒延迟
【发布时间】：2021-03-07 00:11:48
【问题描述】：

我正在尝试在 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

【问题讨论】：

标签： javascript vue.js keydown

【解决方案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 }
  }
})

这里有一些有用的链接可供检查：

【讨论】：