js解决onkeydown长按按键卡顿一下_keydown监听长按顿一下-CSDN博客

本文链接：https://blog.csdn.net/jp571534020/article/details/48310813

据说造成卡顿的原因是window系统为了照顾手不利索的人实现的功能，网页上做动画，连续按键刚开始会卡顿一下，会感觉动画不流畅，解决方案如下代码

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>解决onkeydown卡顿问题</title>
    <style>
     #div1{
     	height: 100px;
     	width: 100px;
     	background-color: red;
     	position: absolute;
     	left: 0;
     	top: 0;
     }
    </style>
    <script type="text/javascript">
      window.οnlοad=function(){
      	var oDiv=document.getElementById("div1");
      	var direction={left:false,top:false,right:false,bottom:false};//左上右下 
      	var timer=null;

      	setInterval(function(){
      		if(direction.left){
      			oDiv.style.left=oDiv.offsetLeft-10+'px';
	      	}
	      	else if(direction.top){
	      			oDiv.style.top=oDiv.offsetTop-10+'px';
	      	}
	      	else if(direction.right){
	      			oDiv.style.left=oDiv.offsetLeft+10+'px';
	      	}
	      	else if(direction.bottom){
	      			oDiv.style.top=oDiv.offsetTop+10+'px';
	      	}
      	},50);

      	document.οnkeydοwn=function(ev){
      		var e=ev || event;

      		switch(e.keyCode){
      			case 37:
      			 direction.left=true;
      			break;
      			case 38:
      			 direction.top=true;
      			break;
      			case 39:
      			 direction.right=true;
      			break;
      			case 40:
      			 direction.bottom=true;
      			break;
      		}
      	   
      	}
      	document.οnkeyup=function(){
      		direction={left:false,top:false,right:false,bottom:false};
      	}
      }
    </script>
</head>
<body>
	<div id="div1"></div>
</body>
</html>