Prevent slow firing of touch start when the event remains still

Question

Edit

I'm essentially trying to create the Mario style jump, so as you touch / mousedown on the body I have an object that starts travelling up, but when you let go this acceleration stops. This means I can't use FastClick as I'm looking for touchstart, touchend events, not a single click event.

~

I'm trying to respond to a touchstart event on mobile in browser. At the moment I'm using these two listeners:

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

I'm essentially trying to emulate something I've had working really well where I use keydown and keyup events to make a box jump and fall respectively.

The issue I'm having is that a touch start, if you don't swipe, is actually delaying for a short while. Either that, or a calculation is making me lose framerate.

I'm already using fastclick and that isn't effecting this (probably because it was never meant to fire on touchstart listeners). You can see what I mean here:

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

I swipe 3 times and the box jumps immediately, and then I click 3 times and you can see (especially on the second one) it loses framerate a little bit or is delayed. Here is another, possibly clearer example: https://www.youtube.com/watch?v=BAPw1M2Yfig

There is a demo here:

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

Just please bear in mind that you'll need to either be on a phone or touch device or emulate touches in chrome.

Can anyone help me lose the framerate drop or delay that is experienced on a touchstart that doesn't turn into a swipe?

In my phones is work right. Can you say more details? Like the browser and the version of the OS or if you use phonegap? — Thomas Karachristos, Oct 16 '16 at 21:25
From fastclick documentation: `FastClick is a simple, easy-to-use library for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers.` They're stating it removes the delay for a click, not a touchstart/touchend, so perhaps using click will help. Also I see you are using `setInterval` in your code to update the graphics, this is really not recommended, you should use [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) instead. — Alexander Derck, Oct 20 '16 at 13:25
This is a common complaint among developers, and as such there are a ton of libraries working to solve it. As mentioned above, FastClick is one of them. I believe angular-material and ngTouch also have solutions for angular1 users. — Dominic Aquilina, Oct 20 '16 at 15:46
@DominicAquilina @AlexanderDerck thanks for the responses. The issue is that I can't use fast click. If you see in my code, the beginning of the touch event switches something ON, and the end of it switches the same thing OFF. Please see edit at top of question. So if I use fast click, I can't press and hold to get the desired UX. Noted about `requestAnimationFrame` — Djave, Oct 21 '16 at 08:23
It would still be a valid launch point, though. It's worth looking into their code to see what they did. — Dominic Aquilina, Oct 21 '16 at 14:43

score 2 · Accepted Answer · edited May 23 '17 at 12:19

You should not write your animation loop using setInterval.

Try to replace it with requestAnimationFrame, like this:

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

Like I've done in this pen.

Now your render function is called as soon as the browser is ready to render a new frame. Note that this implementation doesn't use your fps variable, so your frame rate now depends on the browser/device speed. I tested the pen I've edited on my phone and now the animation is way smoother but the scenery is moving too fast (for me at least).

If you want a constant frame rate you can throttle it as explained, for example, here.

Note that you really don't need Fastclick because you aren't binding any click event in your code.

I really didn't think `requestAnimationFrame` was going to be related to the issue... I feel like a bit of a dufus now. That other thread is great too, especially the fiddle in the comments http://jsfiddle.net/chicagogrooves/nRpVD/2/ thanks! — Djave, Oct 23 '16 at 10:43

Prevent slow firing of touch start when the event remains still

Edit

~

The issue I'm having is that a touch start, if you don't swipe, is actually delaying for a short while. Either that, or a calculation is making me lose framerate.

1 Answers1