是否有可能使JQuery keydown响应更快？

我正在编写一个带有JQuery和HTML5canvas标签的简单页面，我在canvas上移动一个形状，按’w’表示向上，’s’表示向下，’a’表示向左，’d’用于向右。 我把它全部工作了，但我希望这个形状在敲击钥匙时以恒定的速度开始移动。 现在有某种保持期，然后运动开始。 如何让动作立即发生？

这是我的代码的重要部分：

    Your browser does not support the HTML5 canvas tag. 

 start navigating 
 coords should pop up here 
 
 key should pop up here 
  var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); //keypress movements var xtriggered = 0; var keys = {}; var north = -10; var east = 10; var flipednorth = 0; $(document).ready(function(e){ $("input").keydown(function(){ keys[event.which] = true; if (event.which == 13) { event.preventDefault(); } //press w for north if (event.which == 87) { north++; flipednorth--; } //press s for south if (event.which == 83) { north--; flipednorth++; } //press d for east if (event.which == 68) { east++; } //press a for west if (event.which == 65) { east--; } var msg = 'x: ' + flipednorth*5 + ' y: ' + east*5; ctx.beginPath(); ctx.arc(east*6,flipednorth*6,40,0,2*Math.PI); ctx.stroke(); $('#soul2').html(msg); $('#soul3').html(event.which ); $("input").css("background-color","#FFFFCC"); }); $("input").keyup(function(){ delete keys[event.which]; $("input").css("background-color","#D6D6FF"); }); });  

如果我不想发布这么长的代码，请告诉我。

Answer 1

你缺少的是一个“游戏循环”。

在决定是否以及何时在canvas周围移动形状时，您需要使用键事件来跟踪在任何给定时刻哪些键处于关闭状态，然后检查键的状态，而不是直接响应键向下或向上。基于setTimeout()的循环运行独立于键事件。

您已经开始使用您的keys变量来跟踪给定键是否随时关闭：

 // in keydown keys[event.which] = true; // in keyup delete keys[event.which]; 

…除了没有定义event – 你需要使它成为事件处理程序的参数，并且你的代码也没有实际检查keys的值。

这是我正在谈论的简化版本：

 $(document).ready(function(e){ var keys = {}; $("input").keydown(function(event){ keys[event.which] = true; }).keyup(function(event){ delete keys[event.which]; }); function gameLoop() { // w for north if (keys[87]) { north++; flipednorth--; } //press s for south if (keys[83]) { north--; flipednorth++; } // etc. for other keys // code to move objects and repaint canvas goes here setTimeout(gameLoop, 20); } gameLoop(); }); 

演示： http ： //jsfiddle.net/ktHdD/1/

gameLoop()函数将运行gameLoop() 20毫秒左右（您可以根据需要改变它，但这足够快以获得相当平滑的动画）。 每次运行时，它会检查是否有任何键已关闭，如果是，则调整相关的位置变量和重新绘制。 如果您有其他自动移动的对象（例如，在游戏中可能有坏人），您也可以在gameLoop()函数中更新它们。

Answer 2

这不是jQuery。 您将在记事本中找到完全相同的延迟。

你要做的就是这个

 var keydown=false; $(document).on('keydown', function(e){ if (!keydown) { keydown=e.which; console.log('start moving and keep moving'); } }).on('keyup', function(){ console.log("stop moving"); keydown=false; });​ 

Answer 3

我相信你所看到的是一把钥匙的重复率。 这是在用户的操作系统中设置的 – 而不是浏览器。 基本上，除了要求用户更改它之外，您无能为力。

http://windows.microsoft.com/en-US/windows-xp/help/adjust-the-character-repeat-rate

编辑

这不是你的问题的答案，但我会把它留在这里，因为重复率仍然是问题。 请注意，@ nnnnnn表明有一个可行的解决方法。