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

我基本上是想创造马里奥式的跳跃，所以当你在身体上触摸/鼠标向下移动时，我有一个物体开始向上移动，但当你放开时，加速度停止。这意味着我无法使用FastClick，因为我正在查找

touchstart

，

touchend

事件，而不是单个

单击

事件

~ 我正在尝试在浏览器中响应手机上的

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

和

keydup

事件分别使一个盒子跳跃和下降

我遇到的问题是，如果不刷卡，触摸启动实际上会延迟一段时间。要么是这样，要么是计算让我失去了帧率。 我已经在使用fastclick，但这并没有影响到这一点（可能是因为它从未打算在touchstart侦听器上启动）。你可以明白我在这里的意思：

我刷了3次，框立即跳转，然后我点击3次，你可以看到（特别是在第二次）它的帧速率有点丢失或延迟。下面是另一个可能更清楚的例子：

这里有一个演示：

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

---

有谁能帮我消除触摸启动时出现的帧速率下降或延迟，而不是转为刷卡？

您不应该使用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);
  });

就像我以前做的那样

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

如果你想要一个恒定的帧速率，你可以如前所述调节它，例如

---

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

在我的手机中是正常的。你能说得更详细些吗？与浏览器和操作系统版本类似，或者如果您使用phonegap？来自fastclick文档：

fastclick是一个简单易用的库，用于消除移动浏览器上物理点击和触发点击事件之间300毫秒的延迟。

他们说它消除了点击延迟，而不是touchstart/touchend，因此，使用click可能会有所帮助。我还看到您在代码中使用

setInterval

来更新图形，这是不推荐的，您应该改为使用。这是开发人员常见的抱怨，因此有很多库正在努力解决它。如上所述，FastClick就是其中之一。我相信angular material和ngTouch也为angular1用户提供了解决方案。@DominicAquilina@AlexanderDerck感谢您的回复。问题是我不能使用快速点击。如果您在我的代码中看到，触摸事件的开始会打开某些东西，而它的结束会关闭相同的东西。请参见问题顶部的编辑。因此，如果我使用快速点击，我无法按住以获得所需的用户体验。注意到

requestAnimationFrame

它仍然是一个有效的启动点。值得研究一下他们的代码，看看他们做了什么。我真的不认为

requestAnimationFrame

与这个问题有关。。。我现在觉得自己有点笨。另一条线也很棒，尤其是评论中的提琴，谢谢！