限制为每秒两个键盘输入

Question

我想在HTML5 Canvas中制作一个简单的游戏。我最多需要每秒两个键盘输入。

这是到目前为止我的代码

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 
    } 
} 

Move函数用于从一个单元格移动画面到另一个。如何设置两个动作之间的延迟？

Answer 1

您可以使用时间戳来检查当最后一个事件已发生：

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 
        */ 
      } 

这使得每500ms一个关键事件。不像1秒内的2个事件（可能会在50ms内发生，然后暂停950ms），但也许足够接近？

超时/间隔也是可能的，但我个人不喜欢连续（可能不必要的）超时调用的开销。

Answer 2

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);