当事件保持静止时，防止触摸启动缓慢触发

Question

编辑

我实际上是在尝试创建马里奥风格的跳跃，所以当你在身体上触摸/鼠标按下时，我有一个开始向上移动的对象，但是当你放手时，这种加速停止。这意味着我无法使用 FastClick，因为我正在寻找 touchstart、touchend 事件，而不是单个 click 事件。

~

我正在尝试在浏览器中响应移动设备上的touchstart 事件。目前我正在使用这两个监听器：

document.body.addEventListener('touchstart', function(e) {
  e.preventDefault();
  space_on();
  return false;
}, false);

document.body.addEventListener('touchend', function(e) {
  e.preventDefault();
  space_off();
  return false;
}, false);

我本质上是在尝试模仿一些我工作得非常好的东西，我使用 keydown 和 keyup 事件分别使盒子跳跃和下降。

我遇到的问题是，如果您不滑动，触摸启动实际上会延迟一小段时间。要么，要么计算让我失去帧率。

我已经在使用 fastclick，但这并没有影响（可能是因为它从未打算在 touchstart 侦听器上触发）。你可以在这里看到我的意思：

https://www.youtube.com/watch?v=8GgjSFgtmFk

我刷了 3 次，盒子立刻跳了起来，然后我点击了 3 次，你可以看到（尤其是第二次）它有点失去帧率或延迟。这是另一个可能更清晰的示例：https://www.youtube.com/watch?v=BAPw1M2Yfig

这里有一个演示：

http://codepen.io/EightArmsHQ/live/7d851f0e1d3a274b57221dac9aebc16a/

请记住，您需要使用手机或触控设备，或者在 chrome 中模拟触控。

谁能帮我避免在触摸启动时遇到的帧率下降或延迟，但不会变成滑动？

Answer 1

您不应该使用 setInterval 编写动画循环。

尝试用requestAnimationFrame替换它，像这样：

  function render() {
    ctx.fillStyle = 'rgba(255,255,255,0.8)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    draw_rects();
    move();
    fall();
    move_scenery();
    move_jumper();
    jumper.y += jumper.vy;
    requestAnimationFrame(render);
  }

  $(window).load(function() {
    requestAnimationFrame(render);
  });

就像我在 this pen 中所做的那样。

现在，只要浏览器准备好渲染新帧，就会调用您的渲染函数。请注意，此实现不使用您的 fps 变量，因此您的帧速率现在取决于浏览器/设备的速度。我测试了我在手机上编辑的笔，现在动画更流畅了，但风景移动得太快了（至少对我来说）。

如果您想要一个恒定的帧速率，您可以按照说明进行限制，例如，here。

请注意，您确实不需要 Fastclick，因为您没有在代码中绑定任何点击事件。