原生js实现键盘控制div移动且解决停顿问题

首先说明下为什么会停顿？

效果 ：用键盘控制一个div移动

当按下一个方向键不放，div会先停顿一下，然后才开始持续移动。

原因：系统要区分用户是否连续输入，第一个到第二个之间有一个停顿时间
注：了解原因才能解决问题

效果展示

1.简单控制，但是有停顿

2.简单控制，解决停顿

解决方法

方法 ：先开一个定时器，让div一直处于（往4个方向）准备移动的状态

初始4个方向的值都是false，div就保持在原地不动。

按下某个方向键，这个方向的值就改变为true，div就会开始往这个方向移动。

松开方向键，这个方向的值就改变为false , div就停止这个方向移动了。

基本移动，但是有挺顿的代码 

  
  
  
    #div1{
 width:100px;
 height:100px;
 background:greenyellow;
 position:absolute;}
  
  






控制移动，解决停顿的问题 



  
  
  

    
    div{
      width:100px;
      height:100px;
      background: #68affc;
      position:absolute;
      left:100px;
      top:100px;
    }
  
  






总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的工作或者学习能带来一定的帮助，如果有疑问大家可以留言交流。