js解决键盘长按输入时会有停顿的问题

最新推荐文章于 2023-04-11 15:56:21 发布

Polaris_tl

最新推荐文章于 2023-04-11 15:56:21 发布

阅读量6.4k

点赞数 8

分类专栏： js 其他游戏文章标签：连续输入有停顿连续输入卡顿键盘输入问题持续按键盘问题

本文链接：https://blog.csdn.net/polaris_tl/article/details/102495333

版权

js 同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

其他

6 篇文章 0 订阅

订阅专栏

游戏

1 篇文章 0 订阅

订阅专栏

问题：

长按键盘输入内容时中间会有一个停顿（短暂的）
在这里插入图片描述

个人猜测（如有错误欢迎指正）：

这个问题并不是浏览器带来的，因为你在Word、写字板里面连续输入一个字符，同样会出现这个问题。
可能是因为键盘驱动或者操作系统本身为了避免用户连击误输入而故意设计成这样的，毕竟连续输入一个字符的时候并不多。

思路

我们首先监听第一次的keydown事件，然后添加一个定时器，在keydown持续发生的时间里不断的调用相应的函数，直到keyup事件发生，这时清除定时器，不再调用函数。

<style>
  #div1 {
    width: 100px;
    height: 100px;
    background: #CCC;
    position: absolute;
  }
</style>

<script>
  window.onload = function () {
    var oDiv = document.getElementById("div1");
    var direction = {
      left: false,
      top: false,
      right: false,
      bottom: false
    }; //上下左右

    setInterval(function () {
      if (direction.left) {
        oDiv.style.left = oDiv.offsetLeft - 1 + 'px';
      } else if (direction.top) {
        oDiv.style.top = oDiv.offsetTop - 1 + 'px';
      } else if (direction.right) {
        oDiv.style.left = oDiv.offsetLeft + 1 + 'px';
      } else if (direction.bottom) {
        oDiv.style.top = oDiv.offsetTop + 1 + 'px';
      }
    }, 1);

    document.onkeydown = function (ev) {
      var oEvent = ev || event;
      //← 37 ↑38 →39 ↓40
      switch (oEvent.keyCode) {
        case 37:
          direction.left = true;
          break;
        case 38:
          direction.top = true;
          break;
        case 39:
          direction.right = true;
          break;
        case 40:
          direction.bottom = true;
          break;
      }

      document.onkeyup = function () {
        direction = {
          left: false,
          top: false,
          right: false,
          bottom: false
        };
      }
    }
  }
</script>

<body>
  <div id="div1"></div>
</body>