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

前端之家收集整理的这篇文章主要介绍了原生js实现键盘控制div移动且解决停顿问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

效果

键盘控制一个div移动

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

原因:

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

效果展示

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

2.简单控制,解决停顿

解决方法

方法

先开一个定时器,让div一直处于(往4个方向)准备移动的状态

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

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

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

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

<a href="https://www.jb51.cc/tag/jianpan/" target="_blank" class="keywords">键盘</a>控制div移动,会有停顿

总结

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

原文链接:https://www.f2er.com/js/43882.html

猜你在找的JavaScript相关文章