当事件保持静止时防止触摸开始缓慢触发

Question

编辑

我基本上是在尝试创建马里奥风格的跳跃，所以当您在 body 上触摸/按下鼠标时，我有一个 object 开始向上移动，但是当您放开这个加速度时停止。这意味着我无法使用 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/

请记住，您需要在 phone 或触摸设备上或在 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 变量，因此您的帧速率现在取决于 browser/device 速度。我测试了我在 phone 上编辑过的笔，现在动画更流畅了，但风景移动得太快了（至少对我而言）。

如果你想要一个恒定的帧率，你可以按照说明限制它，例如，here。

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

当事件保持静止时防止触摸开始缓慢触发

Prevent slow firing of touch start when the event remains still

javascript

mobile

touch

编辑

~

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