这篇文章主要给大家介绍了如何利用原生js实现键盘控制div移动,并且解决在移动过程中的停顿问题,文中给出了详细的示例代码,相信对大家的理解和学习很有帮助,下面跟着小编一起来看看吧。
首先说明下为什么会停顿?
效果 :用键盘控制一个div移动
当按下一个方向键不放,div会先停顿一下,然后才开始持续移动。
原因:系统要区分用户是否连续输入,第一个到第二个之间有一个停顿时间
注:了解原因才能解决问题
效果展示
1.简单控制,但是有停顿
2.简单控制,解决停顿
解决方法
方法 :先开一个定时器,让div一直处于(往4个方向)准备移动的状态
初始4个方向的值都是false,div就保持在原地不动。
按下某个方向键,这个方向的值就改变为true,div就会开始往这个方向移动。
松开方向键,这个方向的值就改变为false , div就停止这个方向移动了。
基本移动,但是有挺顿的代码
键盘控制div移动,会有停顿
控制移动,解决停顿的问题
键盘控制div移动并且解决停顿问题
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的工作或者学习能带来一定的帮助,如果有疑问大家可以留言交流。
以上就是原生js实现键盘控制div移动且解决停顿问题的详细内容,更多请关注0133技术站其它相关文章!