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

Question

编辑

我基本上试图创造马里奥风格的跳跃,所以当你触摸/身体上的mousedown时,我有一个开始向上移动的物体,但当你松开时,这个加速停止.这意味着我无法使用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/

请记住,您需要使用手机或触摸设备或模拟镀铬触摸.

任何人都可以帮助我失去在不会变成滑动的触控启动上遇到的帧率下降或延迟吗？

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);
  });

就像我在这支笔中所做的那样。

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

如果您想要恒定的帧速率，您可以按照此处的说明限制它。

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