【来自项目的技术点】— 聊聊键盘长按的时候解决卡顿方案
当我们做游戏的时候,很多时候遇用到键盘事件长按的的时候第一下卡顿的情况,怎么解决呢?
以下是我的解决方案,建议复制到编辑器上直接调试
代码里面有我思考的过程,大家可以参考
思考过程
//当按下的时候改变left属性值 40 //总结:当我们按下的时候,键盘的设计者不知道我们是要连续按还是按一下,所以,键盘的制造者定了一个规矩,如果按下超过..s的时候就认为是用户要连续按,于是就出现了一个问题,当我们玩游戏的时候,我们如果连续按下键盘就会先停顿一下,然后在连续的 41 //转化思想:如何解决这个问题,当按第一下的时候我们就执行left/top的改变,那么改变的代码就不能写在按下的事件里面,按下只是传给我们信号,这个信号让top/left连续改变,当抬起键盘的时候,改变这个信号,让上面的改变停止,传给他的信号应该是布尔值
1 老版本
<!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>Document</title>
7 <style>
8 .box { 9 position: absolute;
10 top: 10px;
11 left: 10px;
12 width: 100px;
13 height: 100px;
14 background: red;
15 }
16 </style>
17 </head>
18
19 <body>
20 <div class="box"></div>
21 <script>
22 var box = document.querySelector('.box');
23 var isleft = false;
24 var isright = false;
25 var istop = false;
26 var isbottom = false;
27 setInterval(function() {
28
29 if (isleft) {
30 box.style.left = box.offsetLeft - 5 + 'px';
31 } else if (isbottom) {
32 box.style.top = box.offsetTop - 5 + 'px';
33 } else if (istop) {
34 box.style.top = box.offsetTop + 5 + 'px';
35 } else if (isright) {
36 box.style.left = box.offsetLeft + 5 + 'px';
37 }
38 }, 20)
39 //当按下的时候改变left属性值
40 //总结:当我们按下的时候,键盘的设计者不知道我们是要连续按还是按一下,所以,键盘的制造者定了一个规矩,如果按下超过..s的时候就认为是用户要连续按,于是就出现了一个问题,当我们玩游戏的时候,我们如果连续按下键盘就会先停顿一下,然后在连续的
41 //转化思想:如何解决这个问题,当按第一下的时候我们就执行left/top的改变,那么改变的代码就不能写在按下的事件里面,按下只是传给我们信号,这个信号让top/left连续改变,当抬起键盘的时候,改变这个信号,让上面的改变停止,传给他的信号应该是布尔值
42 window.onkeydown = function(e) {
43 switch (e.keyCode) {
44 case 37:
45 isleft = true;
46 break;
47 case 38:
48 isbottom = true;
49 break;
50 case 39:
51 isright = true;
52 break;
53 case 40:
54 istop = true;
55 break;
56 }
57 }
58 window.onkeyup = function(e) {
59 switch (e.keyCode) {
60 case 37:
61 isleft = false;
62 break;
63 case 38:
64 isbottom = false;
65 break;
66 case 39:
67 isright = false;
68 break;
69 case 40:
70 istop = false;
71 break;
72 }
73 }
74 </script>
75 </body>
76
77 </html>改良版本
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>Document</title>
7 <style>
8 .box { 9 position: absolute;
10 top: 10px;
11 left: 10px;
12 width: 100px;
13 height: 100px;
14 background: red;
15 }
16 </style>
17 </head>
18
19 <body>
20 <div class="box"></div>
21 <script>
22 var box = document.querySelector('.box');
23
24 //当按下的时候改变left属性值
25 //总结:当我们按下的时候,键盘的设计者不知道我们是要连续按还是按一下,所以,键盘的制造者定了一个规矩,如果按下超过..s的时候就认为是用户要连续按,于是就出现了一个问题,当我们玩游戏的时候,我们如果连续按下键盘就会先停顿一下,然后在连续的
26 //转化思想:如何解决这个问题,当按第一下的时候我们就执行left/top的改变,那么改变的代码就不能写在按下的事件里面,按下只是传给我们信号,这个信号让top/left连续改变,当抬起键盘的时候,改变这个信号,让上面的改变停止,传给他的信号应该是布尔值
27 window.onkeydown = function(e) {
28 switch (e.keyCode) {
29 case 37:
30 box.style.left = box.offsetLeft - 5 + 'px';
31 break;
32 case 38:
33 box.style.top = box.offsetTop - 5 + 'px';
34
35 break;
36 case 39:
37 box.style.left = box.offsetLeft + 5 + 'px';
38 break;
39 case 40:
40 box.style.top = box.offsetTop + 5 + 'px';
41 break;
42 }
43 }
44 </script>
45 </body>
46
47 </html>转载于:https://www.cnblogs.com/-yu-ze-/p/8424577.html
【来自项目的技术点】— 聊聊键盘长按的时候解决卡顿方案相关推荐
- 解决 js 长任务导致的页面卡顿（时间分片技术）
时间分片技术 解决 js 长任务导致的页面卡顿 界面操作使用transform动画会使用GPU,不会让界面卡死 解决 js 长任务导致的页面卡顿 在web界面运行长时间代码时,会造成界面卡死,最新看了 ...
- 主界面边框流动效果长时间挂机后会卡顿
1)主界面边框流动效果长时间挂机后会卡顿 2)检测内存是否超过阈值问题 3)堆内存会持续上升,如何用UWA报告来分析 4)关于AssetBundle加密这块,如何重新实现LoadFromFile接口 ...
- JavaScript-定时器解决卡顿问题- 键盘控制移动div
demo: 用键盘上下左右键子,控制div 上下左右移动. 不加定时器的时候会感觉移动的时候有卡顿现象, 可以通过定时器来解决. <!DOCTYPE html> <html lang ...
- 樱桃键盘Ubuntu（Linux系统）卡顿延迟解决方案
最近使用乌班图系统时候,发现自己的樱桃键盘延迟非常严重,按下去要一秒钟以上才有反应.下面介绍一下解决方案 一.打开樱桃官网 官网链接 二.点击右下角客服 和客服说明你的情况.键盘型号,邮箱,然后客服会 ...
- 技术实践 | 聊聊网易云信的信令网络库实践
导读:信令作为实时音视频技术架构中的重要一环,是对建立实时音视频通信起到关键桥梁性的作用. 文|丁永锋 网易云信资深客户端开发工程师 本文将从信令的概念着手,分享在网易云信新一代音视频技术架构下,信令 ...
- 阿里云栖开发者沙龙PHP技术专场-聊聊服务稳定性保障这些事
本文主要带大家了解服务稳定性的重要性和相关策略.策略大概分两部分,第一方面从架构层面介绍保障服务稳定性的常见策略(限流,降级,隔离,超时,重试和集群).第二个方面是从流程方面(code review, ...
- 前端技术演进（六）：前端项目与技术实践
这个来自之前做的培训,删减了一些业务相关的,参考了很多资料(参考资料列表),谢谢前辈们,么么哒 ? 任何五花八门的技术,最终还是要在实践中落地.现代的软件开发,大部分讲求的不是高难度高精尖,而是效率和 ...
- 基于激光投影技术的虚拟键盘
今天给大家带来的开源项目是:基于激光投影技术的虚拟键盘 原文链接:https://mp.weixin.qq.com/s/shFAY6kA9EGqWNZB_Wv8PA 直接看图,看了你就明白了!(键盘运 ...
- (转)图森技术汇 | 聊聊Anchor的前世今生（下）
大家好,欢迎回来!我们继续上次的anchor之旅(点击回顾上一篇精彩内容:图森技术汇 | 聊聊Anchor的"前世今生"(上))从今年年初开始,整个detection领域掀起了&q ...
最新文章
- C语言----字符串左旋
- java面试常问问题（中级及以下工程师）
- Django CMS教程一：安装
- linux+shell+整数计算器,Shell(())实现对整数进行数学运算
- Linux操作系统下软件的安装方法大全
- 相机矩阵(Camera Matrix)
- Nginx应用场景之负载均衡
- 【TSP】基于matlab GUI粒子群算法求解旅行商问题【含Matlab源码 1334期】
- 【数据库开发】MySQL修改root密码
- 用Java实现一个视频聊天软件
- 主流智能家居通信总线、无线、电力载波和以太网的基本介绍
- html5 图片合成,H5案例分享：图片合成
- 常说的监听某个端口，是什么意思？怎么理解？
- 4个让你相见恨晚的电脑操作技巧
- linux服务器关机日期,linux服务器last查看关机记录
- ng2-ace-editor 在 angular 12+ 高版本中无法经过 Ivy编译问题
- android 硬币翻转动画,使用Android标准动画显示正在翻转的硬币的两面
- 自动紧急制动（AEB）
- Safety-Gym环境配置与安装
- Python的序列数据和变量