JQuery - JS - Keydown

时间:2013-06-30 14:05:36

标签: javascript jquery keydown

当我按下任何箭头或使用WSAD时,在第一次"激活" keydown事件,有一点延迟,直到下一个,但在那之后是正常的。示例:当您按住箭头并按住它时,您移动1px,稍等一下,然后定期开始正常移动1px。

我的代码:

 //========== KEY LOGGING ==========
          var pressedKeys = [];

          //declare as globals coz of debug
          var x;
          var y;
          var x2;
          var y2;

          function checkMove(checkX, checkY, cSize, cSpeed, direction) {
              x = checkX - cSpeed;
              y = checkY - cSpeed;
              x2 = checkX + cSize + cSpeed;
              y2 = checkY + cSize + cSpeed;

              switch (direction) {
                  case 1:
                      // left
                      if (x > 0) {
                          return checkX - cSpeed;
                      } else {
                          return 0;
                      }
                      break;

                  case 2:
                      // up
                      if (y > 0) {
                          return checkY - cSpeed;
                      } else {
                          return 0;
                      }
                      break;

                  case 3:
                      // right
                      if (x2 < width) {
                          return checkX + cSpeed;
                      } else {
                          return width - cSize;
                      }
                      break;

                  case 4:
                      // down
                      if (y2 < height) {
                          return checkY + cSpeed;
                      } else {
                          return height - cSize;
                      }
                      break;

                  default:
                      return; // exit this handler for other keys
              }

          }

          // == KEYDOWN ==
          $(document.body).keydown(function (e) {
              pressedKeys[e.which] = true;
              $.each(playerList, function (i, currentPlayer) {
                  //player 1
                  if (currentPlayer.id == 0) {
                      //left    
                      if (pressedKeys[37] == true) {
                          currentPlayer.x = checkMove(currentPlayer.x, currentPlayer.y, currentPlayer.size, currentPlayer.speed, 1)
                      }
                      //up    
                      if (pressedKeys[38] == true) {
                          currentPlayer.y = checkMove(currentPlayer.x, currentPlayer.y, currentPlayer.size, currentPlayer.speed, 2)
                      }
                      //right    
                      if (pressedKeys[39] == true) {
                          currentPlayer.x = checkMove(currentPlayer.x, currentPlayer.y, currentPlayer.size, currentPlayer.speed, 3)
                      }
                      //down    
                      if (pressedKeys[40] == true) {
                          currentPlayer.y = checkMove(currentPlayer.x, currentPlayer.y, currentPlayer.size, currentPlayer.speed, 4)
                      }
                  }
                  //player 2
                  else if (currentPlayer.id == 1) {
                      //left    
                      if (pressedKeys[65] == true) {
                          currentPlayer.x = checkMove(currentPlayer.x, currentPlayer.y, currentPlayer.size, currentPlayer.speed, 1)
                      }
                      //up    
                      if (pressedKeys[87] == true) {
                          currentPlayer.y = checkMove(currentPlayer.x, currentPlayer.y, currentPlayer.size, currentPlayer.speed, 2)
                      }
                      //right    
                      if (pressedKeys[68] == true) {
                          currentPlayer.x = checkMove(currentPlayer.x, currentPlayer.y, currentPlayer.size, currentPlayer.speed, 3)
                      }
                      //down    
                      if (pressedKeys[83] == true) {
                          currentPlayer.y = checkMove(currentPlayer.x, currentPlayer.y, currentPlayer.size, currentPlayer.speed, 4)
                      }
                  }

                  //addplayer
                  if (pressedKeys[80] == true && id < 5) {
                      addPlayer("red", size, width / 2, height / 2);
                  }
                  //+    
                  if (pressedKeys[107] == true) {
                      currentPlayer.speed += 1;
                  }
                  //-
                  if (pressedKeys[109] == true && currentPlayer.speed > 1) {
                      currentPlayer.speed -= 1;
                  }

              });
          });

          // == KEYUP ==    
          $(document.body).keyup(function (e) {
              delete pressedKeys[e.which];
          });

2 个答案:

答案 0 :(得分:0)

您的问题主要取决于操作系统键盘设置中设置的“重复延迟”。在Windows 7中,如果您转到控制面板,然后转到键盘设置,您将看到可以在单个和重复键事件之间设置延迟以及重复键的频率。

显然,由于这是操作系统设置,您无法通过浏览器进行更改,也无法更改自己的设置,因为不是每个人都会共享这些设置。

最好的方法是使用keydown和keyup事件以及计时器。因此,当一个键触发keydown事件时,你设置一个间隔计时器,用你的函数每隔x毫秒触发一次,然后取消触发keyup时的间隔。

答案 1 :(得分:0)

正如@Lee所说,它是操作系统的一个特性。你可以解决它的唯一方法是使用setInterval函数:

var pressedKeys = [];
$(document.body).keydown(function(e){
    if (!pressedKeys[e.which]){
        pressedKeys[e.which] = setInterval(function(){
           console.log(1); 
        }, 0);
    }
});

$(document.body).keyup(function (e) {
    if (pressedKeys[e.which]){
        clearInterval(pressedKeys[e.which]);
        delete pressedKeys[e.which];
    }
});

http://jsfiddle.net/claustrofob/tByzK/2/

它甚至可以让您更好地控制keydown回调,因为您可以调整setInteval的延迟,从而在浏览器中获得更好的效果。