消除键盘事件的短暂延迟

这个不用多说,直接贴代码,
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>键盘事件延迟</title>
 6         <style type="text/css">
 7             #div{
 8                  100px;
 9                 height: 100px;
10                 background-color: greenyellow;
11                 position: absolute;
12             }
13         </style>
14     </head>
15     <body>
16         <div id="div"></div>
17     </body>
18     <script type="text/javascript">
19     window.onload=function(){
20         
21     
22         var div=document.getElementById("div");
23         var offsetx=div.offsetLeft;
24         var offsety=div.offsetTop;
25         var left=false;
26         var right=false;
27         var top=false;
28         var bottom=false;
29         //这里采用计时器消除键盘事件的延迟问题,可直接贴码验证一下
30         setInterval(function() {
31             if (left) {
32                 offsetx-=10;
33                 div.style.left=offsetx+"px";
34             }else if (right) {
35                 offsetx+=10;
36                 div.style.left=offsetx+"px";
37             }else if (top) {
38                 offsety-=10;
39                 div.style.top=offsety+"px";
40             }else if (bottom) {
41                 offsety+=10;
42                 div.style.top=offsety+"px";
43             }
44         },50)
45         document.onkeydown=function(event){
46             switch (event.keyCode){
47                 case 37:
48                 left=true;
49                     break;
50                 case 38:
51                 top=true;
52                     break;
53                 case 39:
54                 right=true;
55                     break;
56                 case 40:
57                 bottom=true;
58                     break;
59                 default:
60                     break;
61             }
62         }
63         document.onkeyup=function(event){
64             switch (event.keyCode){
65                 case 37:
66                 left=false;
67                     break;
68                 case 38:
69                 top=false;
70                     break;
71                 case 39:
72                 right=false;
73                     break;
74                 case 40:
75                 bottom=false;
76                     break;
77                 default:
78                     break;
79             }
80             
81         }
82     }
83     </script>
84 </html>
代码不多,希望对需要的人有帮助...