Javascript 限制为每秒两次键盘输入

Javascript 限制为每秒两次键盘输入,javascript,html,html5-canvas,dom-events,Javascript,Html,Html5 Canvas,Dom Events,我试图在HTML5画布上制作一个简单的游戏。我最多每秒需要两次键盘输入 这是我目前的代码: function move( x, y, r ) { var canid=document.getElementById("draw"); canid.addEventListener('keydown',readkey,false); function readkey(e) { if(e.keyCode == 37) { clearField(); x =

我试图在HTML5画布上制作一个简单的游戏。我最多每秒需要两次键盘输入

这是我目前的代码:

function move( x, y, r ) {
  var canid=document.getElementById("draw");
  canid.addEventListener('keydown',readkey,false);

  function readkey(e) {
    if(e.keyCode == 37) {
      clearField();
      x = x-draw.width / 10;
      redrawpic(x,y,r);
    }
    else if(e.keyCode == 38){
      clearField();
      y = y-draw.height / 10;
      redrawpic( x, y, r );
    }

    //..........etc
  }
}

移动功能用于将图片从一个单元格移动到另一个单元格。如何设置两次移动之间的延迟?

您可以使用时间戳检查上次事件发生的时间:

function move(x,y,r){

   /* your variable declarations*/
   var d1 = Date.now();
   var d2;

        function readkey(e){
             d2 = Date.now();

             // difference between timestamps needs to be 500ms
             if(d2-d1 > 500){
                  // set old Timestamp to new one
                  d1 = d2;
                  /*
                     Rest of your code
                  */
             }
这允许每500毫秒发生一次按键事件。与1秒内发生的两个事件不完全相同(可能在50ms内发生,然后暂停950ms),但可能足够接近

超时/间隔也是可能的,但我个人不喜欢连续(可能不必要)超时调用的开销

var throttle = false;
function readkey(e) {
    if (throttle)
        return;
    throttle = true;
    setTimeout(function () { throttle = false; }, 500);
    /* the rest of your code */
500ms是每秒两个输入,但它们分别被节流。您还可以记录在一整秒钟内有多少个输入。差不多

    if (throttle > 1)
        return;
    throttle++;
    setTimeout(function () { throttle = 0; }, 1000);

+1个很好且干净的解决方案(我更喜欢避免超时,但我对Date.now()的调用可能更昂贵,我不确定)。哪种方法更好?setTimeout()或Date.now()?@mridul我不认为一个比另一个好