当用户按住按钮时如何重复执行函数？

Question

我正在使用JavaScript编写俄罗斯方块游戏。为了使其在Android手机上也可玩，我添加了四个箭头按钮：

<button onclick="rightArrow()">→</button>

我有四个（通过键盘触发的）函数，如下所示：

function right () {
 // Move brick to the right 
}

有没有一种方法可以在用户按住按钮直到松开时再次调用right()函数？我在这里和其他地方找到了几个类似的问题，但答案超出了我的JavaScript知识水平。我没有使用jQuery。我的游戏在这里。

- Radek John

---

@RobertHarvey：可能是硬件键盘。但他似乎在谈论HTML按钮。 - Sergio Tulentsev

正确。我在谈论HTML按钮。 - Radek John

@Battlesquid 这很相似，但我没有使用jQuery。 - Radek John

@RadekJohn说：“我不使用jQuery” - 但你仍然可以使用这个想法。在mousedown事件上启动计时器，在mouseup事件上停止它。计时器会在每个tick执行你的操作。只是我不确定移动浏览器如何处理触摸事件。它仍然是mousedown/mouseup吗？还是touchstart/touchend或其他什么。 - Sergio Tulentsev

@Sergio Tulentsev 确实。 - Radek John

Answer 1

我为您准备了一个小例子，展示如何使用touchstart和touchend事件来实现这一目标。

let counter = 0
let held = false
let button = document.getElementById('button')

// touch events
button.addEventListener('touchstart', (event) => { held = true })
button.addEventListener('touchend', (event) => { held = false })

// mouse events
button.addEventListener('mousedown', (event) => { held = true })
button.addEventListener('mouseup', (event) => { held = false })

// loop
function animate() {
  document.getElementById('counter').innerHTML = counter
  
  if (held) { counter++ }
  else if (counter > 0) { counter-- }

  window.requestAnimationFrame(animate)
}

animate()

<button id="button">
  Press and hold!
</button>

<div id="counter">
  0
</div>

关键在于当 touchstart 发生时设置一些变量，以便我们知道用户一直按住屏幕，直到我们检测到 touchend 事件，这意味着用户已经松开。在另一个循环中，我们会根据此变量执行代码。在您的情况下，您可以在主游戏循环中检查，然后运行移动代码（请注意它可能非常频繁地执行；但是这可以通过定时器轻松解决）。

我还添加了 mousedown 和 mouseup 事件，以便该代码也可以在桌面上工作，但您也可以通过在Chrome Devtools中打开设备预览模式来确认它在移动设备上是否有效（在单击时使用触摸事件）。

- Michael

---

这太完美了！非常感谢。 - Radek John

Answer 2

这是一个简单的例子：

这里是一个简单的例子：

HTML:
<div id="a"></div>

---

CSS:
#a {
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

---

Javascript

const myDiv = document.getElementById('a');
let currentMargin = 0;

function shiftDivRight() {
  currentMargin += 10;
  myDiv.style.marginLeft = currentMargin + 'px';
}
document.addEventListener('keydown', () => {
  shiftDivRight();
});

这将使div向右移动，只要按下任何键即可。

要针对特定的键触发，例如回车键：

document.addEventListener('keydown', (event) => {
   if(event.which === 13) {
      shiftDivRight();
   }
});

- Brandon

---

这个问题是关于移动设备和HTML按钮的，而不是在桌面电脑上按右箭头键。 - Michael

@MichaelYang 我的错误。 - Brandon

是的，我已经有这样一个函数了。我只想让HTML按钮以类似键盘的方式调用它。 - Radek John

Answer 3

        <script type="text/javascript">
        let i = 0;
        let pressed = false;

        document.getElementById('div-1').onmousedown = ()=> {
            pressed = true;
            increment();
        }

        document.getElementById('div-1').onmouseup = ()=> {
            pressed = false;
            increment();
        }

        function increment(){
            
            if(!pressed) return;
            else i++;
            console.log(i);
            setTimeout(()=> increment(), 10)
        }
    </script>

- maxim ganiev