按住时 KeyDown 不会连续触发

Question

我有这个Plunkr，

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

这在所有浏览器中都有效，但是当按住该键时，会立即触发第一个 keydown 事件（div 一旦移动），并等待一段时间，然后继续移动。

因此，这意味着keydown事件一旦触发，浏览器就会等待检测是否还有后续keyUp事件，然后在很短的时间后（当没有键盘输入时），它会继续触发keydown事件。

（要查看问题，将焦点放在窗口上，按向右箭头并按住，div 应该移动一次 5px，然后等待，然后再次继续移动）

问题：有没有办法解决，这样我就可以按住按键，div 应该立即开始移动，而无需等待检测后续的 keyup（一次）？

$(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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='mover'></div>

Answer 1

我会建议一些关于超时的事情，就像这样

http://codepen.io/kevrowe/pen/qEgGVO

$(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();
  });
})