Question

我想抓住onkeydown的事件来移动一个盒子但是当我不断按下键时，存在一个延迟，也就是说，当我不断按下一个键时，盒子会在一段时间后移动。请帮我消除延迟。

Answer 1

<html>
<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: #ccc;
            position: absolute;
            top: 0px;
            left: 0px;
        }
        .clear {
            clear: both;
        }
        p {
            margin-top: 100px;
        }
    </style>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>

    <div class="box"></div>
    <div class="clear"></div>
    <p> Press Space Bar</p>

    <script type="text/javascript">

        $(document).ready(function(){
            console.log("ready");

        });

        $(document).on('keydown', function(event){

            var code = event.keyCode;

            if (code == 32) {

                var div = $('.box');

                var left = div.position().left;

                var new_left = left + 1;
                console.log(new_left);
                div.css({
                    'left': new_left + "px"
                });

            }

        });

    </script>

</body>
</html>

JSfiddle Link

也许这可以给你一些帮助。并尝试在事件上使用console.log

Answer 2

如果我理解正确，我相信您所指的延迟可能是键盘的默认功能。例如，如果您打开文本编辑器并按住空格，则会注意到它会执行以下操作：

（稍微移动一下）（等）（开始移动）

键盘事件也以这种方式工作。如果您将盒子移动到与此类似的位置：

document.addEventListener("keydown", function(e) { 
    var key = e.which;
    if( key == 37 ) X -= speed;
    if( key == 38 ) Y -= speed;   
    if( key == 39 ) X += speed;
    if( key == 40 ) Y += speed;   
});

<强> Here is an example of the code above

你会注意到这种“类型 - 作家”之类的行为。要解决此问题，您可以使用布尔值来检测何时按下某个键（true），然后检测按下的键何时被释放（false）。在您的屏幕更新功能中，检查这些布尔运动。

var LEFT = false , RIGHT = false, UP = false, DOWN = false;
...

document.addEventListener("keydown", function(e) { 
    var key = e.which;
    if( key == 37 ) LEFT = true;
    if( key == 38 ) UP = true;   
    if( key == 39 ) RIGHT = true;
    if( key == 40 ) DOWN = true;   
});
document.addEventListener("keyup", function(e) { 
    var key = e.which;
    if( key == 37 ) LEFT = false;
    if( key == 38 ) UP = false;     
    if( key == 39 ) RIGHT = false;
    if( key == 40 ) DOWN = false;   
});

...

// In update function

    if( LEFT ) X -= speed;
    if( UP ) Y -= speed;   
    if( RIGHT ) X += speed;
    if( DOWN ) Y += speed;

<强> Here is an example

请注意，在第二个示例中，运动更加平滑。

JavaScript：＆＃34; onkeydown＆＃34;和＆＃34; onkeypress＆＃34;

2 个答案: