javascript - 按住时 KeyDown 不会连续触发

Question

我有这个Plunkr ,

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

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

因此，这意味着 keydown 事件一旦触发，浏览器就会等待检测是否还有后续的 keyUp 事件，然后在很短的时间后(当没有 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();
  });
})