按下键时循环一个函数

Question

我正在尝试使用 Javascript 中的两个键上下移动 div。这个想法是，当某个键被按下时，一个函数循环并每次添加到 div 的 'top' 样式值。基本功能有效，但我无法让它循环，也无法响应按键。

很难在 Javascript 中找到有关按键处理的信息，似乎大多数人都使用 jQuery 来处理。

我对 do-while 循环的使用是否正确？有没有更好的方法来处理 keydown 和 keyup 事件？

这是我的代码：

var x = 0;
console.log(x);

function player1MoveDown() {
            var value = document.getElementById("player1").style.top;
            value = value.replace("%", "");
            value = parseInt(value);
            value = value + 1;
            value = value + "%";
            document.getElementById("player1").style.top = value;
            console.log(value);
        }    //moves paddle down; adds to paddle's 'top' style value

function player1MoveSetting() {
    x = 1;
    do {
        setInterval(player1MoveDown(), 3000);
    }   
    while (x == 1);
    console.log(x);
} //paddle moves while x=1; runs player1MoveDown function every 3 seconds

 function player1Stop() {
    x = 0;
 }

这里是 HTML 的相关部分：

<div class="paddle" id="player1" style="top:1%" onkeydown="player1MoveSetting()" onkeyup="player1Stop()"></div>

Answer 1

您不能将按键事件附加到 div，除非它具有 tabindex:

<div class="paddle" id="player1" 
     onkeydown="player1MoveSetting()"
     onkeyup="player1Stop()"
     tabindex="1"
>
</div>

您可以替换所有这些代码：

var value = document.getElementById("player1").style.top;
value = value.replace("%", "");
value = parseInt(value);
value = value + 1;
value = value + "%";
document.getElementById("player1").style.top = value;

……有了这个：

var p1= document.getElementById('player1');
p1.style.top= parseInt(p1.style.top)+1+'%';

这调用 player1MoveDown:

的 return 结果

setInterval(player1MoveDown(), 3000);

因为 player1MoveDown 没有 return 任何东西，所以它等同于

setInterval(null, 3000);

要每 3 秒调用一次函数，请改为：

setInterval(player1MoveDown, 3000);

这将创建一个无限循环：

x = 1;
do {
  setInterval(player1MoveDown, 3000);
}   
while (x == 1);

即使 keyup 将全局 x 设置为 0，它也永远不会运行因为循环永远不会结束。

相反，创建一个 timer 变量，它在 keydown 上设置并在 keyup 上清除。

完成JavaScript代码

var timer;

function player1MoveDown() {
  var p1= document.getElementById('player1');
  p1.style.top= parseInt(p1.style.top)+1+'%';
  console.log(p1.style.top);
}

function player1MoveSetting() {
  if(timer) return;
  timer= setInterval(player1MoveDown, 100);
}

function player1Stop() {
  clearInterval(timer);
  timer= null;
}

document.getElementById('player1').focus();

Working Fiddle

按下键时循环一个函数

Loop a function while key is pressed

html

javascript

loops

onkeypress

onkeydown