KeyDown按住不连续触发

Question

我有这个Plunkr，

这包含一个div，我在其上绑定了一个keydown事件。按向右或向左箭头，div应该开始移动。

此方法在所有浏览器中都有效，但是当按键按住时时，立即触发第一个keydown事件（div移动一次），它等待一个时间间隔，然后继续移动。

因此，这意味着一旦触发了keydown事件，然后浏览器也会等待检测是否还有随后的keyUp事件，然后在很短的时间（如果没有按键）之后，它将继续触发[ C0]事件。

<<

问题：有没有办法，所以我可以一直按住键，并且div应该立即开始移动，而不必等待检测后续的keyup（once）]

keydown

$(function() {
  $(window).keydown(function(e) {
    console.log(e.keyCode)
    if (e.keyCode == 39)
      move(5, 'left', $('.mover'))
    else if (e.keyCode == 37)
      move(-5, 'left', $('.mover'))
  })

})

function move(offset, direction, target) {
  console.log($(target))
  $(target).css(direction, (parseInt($(target).css(direction)) + offset) + 'px')
}

.mover {
  height: 50px;
  width: 50px;
  display: inline-block;
  background: black;
  position: absolute;
  left: 0;
}

我有这个Plunkr，它包含一个div，我在该div上绑定了一个keydown事件。按向右或向左箭头，div应该开始移动。在所有浏览器中都可以使用，但是在按下键并......>

我会在超时时提出一些建议，例如这样
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='mover'></div>
http://codepen.io/kevrowe/pen/qEgGVO
 
当要跟踪的键上发生keydown事件时，请将此信息存储在映射或标记中的某个位置。
发生键事件时，请清除给定键的标志。
然后，在计时器上，您可以轮询键映射的状态，并按任何键方向移动对象。
可能有一个比轮询更好的解决方案，但是除了轮询之外，我不知道一种方法来测试某个键是否按下。 
在键盘上，还需要检查是否需要中断移动对象。
 
一种解决方案是仅在循环中连续运行move函数，直到发生键入键为止
$(function() {
  var direction,
      movingTimeout = -1;

  $(window).on('keydown', function(e) {    
    if (e.keyCode == 39) {
      direction = 'right';
    } else if (e.keyCode == 37) {
      direction = 'left';
    }  

    startMoving(direction);
  });

  function stopMoving() {
    clearTimeout(movingTimeout);
    movingTimeout = -1;
  }

  function startMoving(direction) {
    if (movingTimeout === -1) {      
      loop(direction);
    }
  }

  function loop(direction) {
    move(direction === 'left' ? -5 : 5, $('.mover'));
    movingTimeout = setTimeout(loop, 10, direction);
  }

  function move(offset, $target) {
    $target.css('left', (parseInt($target.css('left')) + offset) + 'px')
  }

  $(window).on('keyup', function(e) {    
    stopMoving();
  });
})
 
对于可能感兴趣的用户，这是处理双向运动的另一种方法。例如：if (e.keyCode == 39){
  var stop = setInterval(function(){ 
    move(5, 'left', $('.mover'))
  }, 25);

  window.on("keyup", function(){
    //stop the loop
    clearInterval(stop);
    //and remove the keyup listener
    window.off("keyup", arguments.callee);
  })
} else if //etc...
 + up键=“东北”方向：
right
希望这会有所帮助。
干杯！

Answer 1

Answer 2

发生键事件时，请清除给定键的标志。

Answer 3

$(function() {
  var direction,
      movingTimeout = -1;

  $(window).on('keydown', function(e) {    
    if (e.keyCode == 39) {
      direction = 'right';
    } else if (e.keyCode == 37) {
      direction = 'left';
    }  

    startMoving(direction);
  });

  function stopMoving() {
    clearTimeout(movingTimeout);
    movingTimeout = -1;
  }

  function startMoving(direction) {
    if (movingTimeout === -1) {      
      loop(direction);
    }
  }

  function loop(direction) {
    move(direction === 'left' ? -5 : 5, $('.mover'));
    movingTimeout = setTimeout(loop, 10, direction);
  }

  function move(offset, $target) {
    $target.css('left', (parseInt($target.css('left')) + offset) + 'px')
  }

  $(window).on('keyup', function(e) {    
    stopMoving();
  });
})

Answer 4

right