Javascript 如何使函数调用更快

我正在做一个乒乓球游戏，希望我有一个工作功能，可以上下移动球拍。我想调用这个函数的频率比调用它的频率要高。拨片移动太慢，我不想在每次调用该函数时增加拨片移动量，因为这会使其“起伏”

我试着使用一个设定的间隔，但不幸的是，我只是得到了一个错误

document.body.addEventListener("keypress", function(e) {
    getWasdKey(e);
});

function getWasdKey(e){
  var key = e.keyCode;
  if(key == 119){//w key
    leftUp();//up
  }
  if(key == 115){//s key
    leftDown();//down
  }
  if(key == 107){//k key
    rightUp();//up
  }
  if(key == 109){//m key
    rightDown();//down
  }
}

var x = 1;
function leftUp(){
  setStyle('paddlewasd', 'top', (parseInt(getStyle('paddlewasd', 'top'))) - x + "px");
}
function leftDown(){
  setStyle('paddlewasd', 'top', (parseInt(getStyle('paddlewasd', 'top'))) + x + "px");
}
function rightUp(){
  setStyle('paddlearrow', 'top', (parseInt(getStyle('paddlearrow', 'top'))) - x + "px");
}
function rightDown(){
  setStyle('paddlearrow', 'top', (parseInt(getStyle('paddlearrow', 'top'))) + x + "px");
}

---

作为补充说明，我创建了一个setStyle函数来帮助我的代码更好地工作。它工作正常，以前也有过。它需要3个参数，id，css属性，以及您想要设置的内容。Get style只是前两个参数

您目前依赖键盘的重复频率，不同系统的重复频率可能不同

我建议您不要监听按键事件，而是使用创建一个游戏循环，并在该循环中检查键盘的当前状态并做出相应的反应

编辑：这里有一个极简主义的例子，演示如何做到这一点

const keyState = {};

window.addEventListener('keydown', function (e) {
  keyState[e.keyCode] = true;
});

window.addEventListener('keyup', function (e) {
  keyState[e.keyCode] = false;
});

function frameLoop () {
  requestAnimationFrame(frameLoop);

  if (keyState[KEYCODE]) {
    // Do something
  }
}

requestAnimationFrame(frameLoop);

---

setInterval

将在定期间隔后隐式调用函数，我想这不是您要寻找的过程，因为您正在捕获按键事件。按键事件只会经常发生。您可以在按键时运行一个间隔，在未按键时取消此间隔，并使用此间隔设置样式。我建议您修改

transform

属性，而不是

top

。每次更改

top

，浏览器都必须重新流式显示文档，这会导致动画速度缓慢且滞后。如果您将

transform

与

translate3d

一起使用，您的移动将更加平滑。